vue实现多条件和模糊搜索功能


Posted in Javascript onMay 28, 2019

本文实例为大家分享了vue实现多条件和模糊搜索的具体代码,供大家参考,具体内容如下

html

<div class="content">
 <div class="right">

  <select name="sex" width='100' v-model="formData.sex">
  <option value="" selected>请选择</option>
  <option value="1">男</option>
  <option value="2">女</option>
  <option value="3">不是人</option>
  </select>

  <input type="text" v-model="formData.phone" placeholder="电话(精准搜索)">

  <input type="text" v-model="formData.name" placeholder="姓名(模糊搜索)">

  <button @click="search(formData)">提交数据</button>
 </div>
 <div class="left">
  <ul>
  <li v-for="(item,index) in realList" :key="index">
   {{item.name}} || {{item.phone}} || {{item.sex | filterSex}}
  </li>
  </ul>
 </div>
 </div>

js

export default {
 name: 'styleTest',
 data() {
 return {
  formData: {
  name: '',
  phone: '',
  sex: '',
  },
  realList: [],
  list: [
  {
   name: '张址',
   phone: 18715023011,
   sex: 1,
  },
  {
   name: '张三',
   phone: 18715023012,
   sex: 2,
  },
  {
   name: '李四',
   phone: 18715023013,
   sex: 1,
  },
  {
   name: '赵武',
   phone: 18715023014,
   sex: 2,
  },
  {
   name: '晋南',
   phone: 18715023015,
   sex: 1,
  },
  {
   name: '张东',
   phone: 18715023016,
   sex: 2,
  },
  ],
 };
 },
 filters: {
 filterSex(val) {
  switch (val) {
  case 1:
   return '男';
   break;
  case 2:
   return '女';
   break;
  case 3:
   return '不是人';
   break;
  default:
   return '男';
  }
 },
 },
 computed: {
 // realList() {
 // let { name, phone, sex } = this.formData;
 // if (name && phone && sex) {
 //  return this.list;
 // }
 // },
 },
 created() {
 this.search({});
 },
 methods: {
 search({ name, phone, sex }) {
  this.realList = this.list.filter(item => {
  let matchName = true; // 姓名 筛选
  let matchSex = true; // 性别 筛选
  let matchPhone = true; // 号码 筛选

  if (sex) {
   matchSex = item.sex == sex;
  }

  if (phone) {
   // console.info(Object.prototype.toString.call(phone));
   matchPhone = item.phone == phone;
  }

  if (name) {
   // 模糊搜索;
   const keys = name
   .toUpperCase() // 转大写
   .replace(' ', '') // 删掉空格
   .split(''); // 切割成 单个字

   matchName = keys.every(key => item.name.toUpperCase().includes(key));
  }
  return matchName && matchPhone && matchSex;
  });
 },
 },
};

以上就是本文的全部内容,希望对大家的学习有所帮助,也希望大家多多支持三水点靠木。

Javascript 相关文章推荐
jquery调用wcf并展示出数据的方法
Jul 07 Javascript
jQuery瀑布流插件Wookmark使用实例
Apr 02 Javascript
IE下通过a实现location.href 获取referer的值
Sep 04 Javascript
JavaScript 动态三角函数实例详解
Jan 08 Javascript
JSON 数据详解及实例代码分析
Jan 20 Javascript
React Native之ListView实现九宫格效果的示例
Aug 02 Javascript
Angularjs 1.3 中的$parse实例代码
Sep 14 Javascript
jQuery实现炫丽的3d旋转星空效果
Jul 04 jQuery
Vue.js实现大屏数字滚动翻转效果
Nov 29 Javascript
JS实现字体背景跑马灯
Jan 06 Javascript
js HTML DOM EventListener功能与用法实例分析
Apr 27 Javascript
Vue结合路由配置递归实现菜单栏功能
Jun 16 Javascript
vue实现路由切换改变title功能
May 28 #Javascript
Vue 无限滚动加载指令实现方法
May 28 #Javascript
vue实现搜索过滤效果
May 28 #Javascript
微信小程序 image组件遇到的问题
May 28 #Javascript
vue实现搜索功能
May 28 #Javascript
Bootstrap 时间日历插件bootstrap-datetimepicker配置与应用小结
May 28 #Javascript
如何实现双向绑定mvvm的原理实现
May 28 #Javascript
You might like
php 上传文件类型判断函数(避免上传漏洞 )
2010/06/08 PHP
mac环境中使用brew安装php5.5.15
2014/08/18 PHP
使用PHP生成PDF方法详解
2015/01/23 PHP
php.ini中的request_order推荐设置
2015/05/10 PHP
PHP格式化显示时间date()函数代码
2018/10/03 PHP
date.parse在IE和FF中的区别
2010/07/29 Javascript
javascript学习笔记(十一) 正则表达式介绍
2012/06/20 Javascript
JS简单实现登陆验证附效果图
2013/11/19 Javascript
jQuery事件绑定和委托实例
2014/11/25 Javascript
js与jquery回车提交的方法
2015/02/03 Javascript
jQuery.Highcharts.js绘制柱状图饼状图曲线图
2015/03/14 Javascript
jQuery oLoader实现的加载图片和页面效果
2015/03/14 Javascript
关于延迟加载JavaScript
2015/05/05 Javascript
jquery无限级联下拉菜单简单实例演示
2015/11/23 Javascript
理解js回收机制通俗易懂版
2016/02/29 Javascript
javascript遍历json对象的key和任意js对象属性实例
2017/03/09 Javascript
Vue2.0基于vue-cli+webpack父子组件通信(实例讲解)
2017/09/14 Javascript
父组件中vuex方法更新state子组件不能及时更新并渲染的完美解决方法
2018/04/25 Javascript
通过js给网页加上水印背景实例
2019/06/17 Javascript
Node.js学习教程之Module模块
2019/09/03 Javascript
Vue中qs插件的使用详解
2020/02/07 Javascript
vue的hash值原理也是table切换实例代码
2020/12/14 Vue.js
MySQL最常见的操作语句小结
2015/05/07 Python
浅谈Python用QQ邮箱发送邮件时授权码的问题
2018/01/29 Python
Python multiprocessing多进程原理与应用示例
2019/02/28 Python
打包python 加icon 去掉cmd黑窗口方法
2019/06/24 Python
python可视化爬虫界面之天气查询
2019/07/03 Python
python爬虫调度器用法及实例代码
2020/11/30 Python
HTML5中的websocket实现直播功能
2018/05/21 HTML / CSS
报社实习生自荐信
2014/01/24 职场文书
班班通项目实施方案
2014/02/25 职场文书
预备党员入党自我评价范文
2014/03/10 职场文书
2016年全国助残日活动总结
2016/04/01 职场文书
mysql 子查询的使用
2022/04/28 MySQL
go goth封装第三方认证库示例详解
2022/08/14 Golang
SqlServer常用函数及时间处理小结
2023/05/08 SQL Server