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

本文实例为大家分享了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;
  });
 },
 },
};

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

(0)

相关推荐

  • vuejs通过filterBy、orderBy实现搜索筛选、降序排序数据

    直接贴代码了: 先上输入前的样子: <style> #example{margin:100px auto;width:600px;} .show{margin:10px;} #searchText{display: block;margin:0 auto 10px;height:24px;line-height: 24px;width:200px;} .content ul li{text-align: center;} .content ul li span{display: inline-

  • Vue.js实现多条件筛选、搜索、排序及分页的表格功能

    与上篇实践教程一样,在这篇文章中,我将继续从一种常见的功能--表格入手,展示Vue.js中的一些优雅特性.同时也将对filter功能与computed属性进行对比,说明各自的适用场景,也为vue2.0版本中即将删除的部分filter功能做准备. 需求分析 还是先从需求入手,想想实现这样一个功能需要注意什么.大致流程如何.有哪些应用场景. 表格本身是一种非常常用的组件,用于展示一些复杂的数据时表现很好. 当数据比较多时,我们需要提供一些筛选条件,让用户更快列出他们关注的数据. 除了预设的一些筛选条

  • vue实现搜索功能

    本文实例为大家分享了vue实现搜索功能的具体代码,供大家参考,具体内容如下 methods (要有一定的触发条件才能执行,如点击事件) <template> <div class="safetyInfo"> <input type="text" name="" id="" placeholder="搜索" v-model="search"/> <

  • Vue 仿百度搜索功能实现代码

    无上下选择 <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>jsonp</title> <meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, us

  • 基于Vue.js实现简单搜索框

    在github上看到的练习,看个遍代码后自己再练一遍,先放原址:https://github.com/lavyun/vue-demo-search 主要用到的知识很简单,简单的vuejs2.0的知识就够了.源码用了.vue构建和ES6,用了webpack打包等等.我资历还浅,先用一个简单的.js的写. 先看效果 这里有两个组件,一个组件是logo部分的,一个是搜索框部分的. html html很简单,就是引用两个组件. <div id="app"> <logo-pic

  • vue实现搜索过滤效果

    本文实例为大家分享了vue实现搜索过滤效果的具体代码,供大家参考,具体内容如下 html: <table id="tfhover_1" class="tftable_1" border="1"> <tr> <th>名称</th> <th>链接状态</th> <th>IP</th> <th>特例类型</th> <th>

  • Vue.js实现实例搜索应用功能详细代码

    实例搜索应用 实现效果: 实现代码与注释: <!DOCTYPE html> <html> <head> <title>实例搜索</title> <meta charset="utf-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <style type=&q

  • 利用vue + element实现表格分页和前端搜索的方法

    前言 ElementUI是饿了么前端开源的一个基于Vue的前端框架,已经帮我们封装好了一系列功能性的组件,比如栅格系统.表格.表单.树形菜单.通知等.对于搞后台管理界面的项目,特别是不需要考虑兼容ie8.ie9以下的项目.ElementUI是一个不错的选择. 而且ElementUI的文档写得十分详尽,参照demo可以很快上手. 本文主要介绍了关于vue + element实现表格分页和前端搜索的相关内容,分享出来供大家参考学习,下面话不多说了,来一起看看详细的介绍吧. 实现思路 1.前端后台管理

  • vue2.0多条件搜索组件使用详解

    本文为大家分享了vue2.0多条件搜索组件的实现方法,供大家参考,具体内容如下 搜索条件为死数据,通过select下拉,选取多个条件:同时可点击加号增加搜索条件,点击减号减少搜索条件: templete <template> <div class="retrievalmian"> <div class="retrievaltitle"> <a class="btn-default tabbtn" @cli

  • vue组件实现可搜索下拉框扩展

    本文实例为大家分享了vue组件实现可搜索下拉框的具体代码,供大家参考,具体内容如下 一.效果 二.代码 dropdown-ext.vue <template> <div class="vue-dropdown-ext" :class="themestyle" v-show-extend="show"> <div class="search-module clearfix" v-show="

随机推荐