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 相关文章推荐
javascript 数组排序函数
Aug 20 Javascript
jQuery ajax cache缓存问题
Jul 01 Javascript
Javascript 鼠标移动上去 滑块跟随效果代码分享
Nov 23 Javascript
jquery垂直公告滚动实现代码
Dec 08 Javascript
jquery+ajax请求且带返回值的代码
Aug 12 Javascript
JSON简介以及用法汇总
Feb 21 Javascript
如何高效率去掉js数组中的重复项
Apr 12 Javascript
jQuery中on方法使用注意事项详解
Feb 15 Javascript
Bootstrap页面标题Page Header的实现方法
Mar 22 Javascript
jQuery实现的简单动态添加、删除表格功能示例
Sep 21 jQuery
jQuery简单判断值是否存在于数组中的方法示例
Apr 17 jQuery
详解datagrid使用方法(重要)
Nov 06 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 时间转换Unix时间戳代码
2010/01/22 PHP
PHP修改session_id示例代码
2014/01/08 PHP
php环境无法上传文件的解决方法
2014/04/30 PHP
ThinkPHP中的关联模型注意点
2014/06/16 PHP
php中Socket创建与监听实现方法
2015/01/05 PHP
如何在HTML 中嵌入 PHP 代码
2015/05/13 PHP
php实现异步数据调用的方法
2015/12/24 PHP
php Session无效分析资料整理
2016/11/29 PHP
浅谈Laravel核心解读之Console内核
2018/12/02 PHP
Laravel框架实现超简单的分页效果示例
2019/02/08 PHP
php xhprof使用实例详解
2019/04/15 PHP
escape、encodeURI、encodeURIComponent等方法的区别比较
2006/12/27 Javascript
写的htc的数据表格
2007/01/20 Javascript
javascript 常用代码技巧大收集
2009/02/25 Javascript
javascript快速排序算法详解
2014/09/17 Javascript
javascritp添加url参数将参数加入到url中
2014/09/25 Javascript
Node.js 学习笔记之简介、安装及配置
2015/03/03 Javascript
jquery实现拖动效果
2016/08/10 Javascript
javascript读取文本节点方法小结
2016/12/15 Javascript
JS简单生成由字母数字组合随机字符串示例
2018/05/25 Javascript
Vue+element 解决浏览器自动填充记住的账号密码问题
2019/06/11 Javascript
Vue-cli项目部署到Nginx服务器的方法
2019/11/01 Javascript
vue+iview框架实现左侧动态菜单功能的示例代码
2020/07/23 Javascript
手机浏览器唤起微信分享(JS)
2020/10/11 Javascript
初学python数组的处理代码
2011/01/04 Python
详细介绍Python函数中的默认参数
2015/03/30 Python
Python pickle模块用法实例分析
2015/05/27 Python
python判断链表是否有环的实例代码
2020/01/31 Python
解决import tensorflow as tf 出错的原因
2020/04/16 Python
pycharm 添加解释器的方法步骤
2020/08/31 Python
加拿大廉价机票预订网站:CheapOair.ca
2018/03/04 全球购物
乌克兰在线药房:Аптека24
2019/10/30 全球购物
保加利亚手表、香水、化妆品和珠宝购物网站:Brasty.bg
2020/04/22 全球购物
物流专业大学的自我评价
2014/01/11 职场文书
公司周年庆典邀请函
2014/01/12 职场文书
婚姻出轨保证书
2015/05/08 职场文书