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 相关文章推荐
select组合框option的捕捉实例代码
Sep 30 Javascript
Javascript在IE下设置innerHTML时出现未知的运行时错误的解决方法
Jan 12 Javascript
jquery查找父元素、子元素(个人经验总结)
Apr 09 Javascript
Javascript监视变量变化的方法
Jun 09 Javascript
jquery+css3实现网页背景花瓣随机飘落特效
Aug 17 Javascript
angularjs学习笔记之双向数据绑定
Sep 26 Javascript
JS实现线性表的链式表示方法示例【经典数据结构】
Apr 11 Javascript
Vue2.0点击切换类名改变样式的方法
Aug 22 Javascript
JavaScript惰性求值的一种实现方法示例
Jan 11 Javascript
JS替换字符串中指定位置的字符(多种方法)
May 28 Javascript
微信小程序开发(二):页面跳转并传参操作示例
Jun 01 Javascript
如何使用jQuery操作Cookies方法解析
Sep 08 jQuery
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
在DC的漫画和电影中,蝙蝠侠的宿敌,小丑的真名是什么?
2020/04/09 欧美动漫
PHP 遍历XP文件夹下所有文件
2008/11/27 PHP
php curl 伪造IP来源的实例代码
2012/11/01 PHP
php中count获取多维数组长度的方法
2014/11/03 PHP
深入浅析Yii admin的权限控制
2016/08/31 PHP
实例讲解PHP表单
2020/06/10 PHP
jQuery EasyUI API 中文文档 - Spinner微调器使用
2011/10/21 Javascript
js/jquery获取浏览器窗口可视区域高度和宽度以及滚动条高度实现代码
2012/12/17 Javascript
Jquery 动态生成表格示例代码
2013/12/24 Javascript
javascript生成随机颜色示例代码
2014/05/05 Javascript
jQuery实现拖拽效果插件的方法
2015/03/23 Javascript
使用JavaScript实现ajax的实例代码
2016/05/11 Javascript
jQuery实现一个简单的验证码功能
2017/06/26 jQuery
Vue-cli-webpack搭建斗鱼直播步骤详解
2017/11/17 Javascript
JS使用对象的defineProperty进行变量监控操作示例
2019/02/02 Javascript
javascript获取select值的方法完整实例
2019/06/20 Javascript
浅谈实现在线预览PDF的几种解决办法
2020/08/10 Javascript
vue+elementUI动态增加表单项并添加验证的代码详解
2020/12/17 Vue.js
[41:54]2018DOTA2亚洲邀请赛 4.1 小组赛A组加赛 TNC vs Liquid
2018/04/03 DOTA
Python中subprocess的简单使用示例
2015/07/28 Python
使用numba对Python运算加速的方法
2018/10/15 Python
Python callable内置函数原理解析
2020/03/05 Python
python爬虫---requests库的用法详解
2020/09/28 Python
Html5百叶窗效果的示例代码
2017/12/11 HTML / CSS
Marriott中国:万豪国际酒店查询预订
2016/09/02 全球购物
微软日本官方网站:Microsoft日本
2017/11/26 全球购物
全球速卖通俄罗斯站:AliExpress俄罗斯
2019/06/17 全球购物
宝宝周岁宴答谢词
2014/01/26 职场文书
市场拓展计划书
2014/05/03 职场文书
期末评语大全
2014/05/04 职场文书
2014年卫生保健工作总结
2014/12/08 职场文书
先进事迹材料范文
2014/12/29 职场文书
素质教育培训心得体会
2016/01/19 职场文书
《蟋蟀的住宅》教学反思
2016/02/17 职场文书
Redis如何实现分布式锁
2021/08/23 Redis
Redis之RedisTemplate配置方式(序列和反序列化)
2022/03/13 Redis