vue实现input输入模糊查询(三种方式)

目录

vue实现input输入模糊查询(三种方式)

1 计算属性实现模糊查询

演示：

2 watch 监听实现模糊查询

3 通过按钮点击实现模糊查询

演示：

1 计算属性实现模糊查询

vue 中通过计算属性实现模糊查询,创建 html 文件，代码直接放入即可。

这里自己导入 vue，我是导入本地已经下载好的。

演示：

打开默认显示全部

输入关键字模糊查询，名字和年龄都可以

完整代码如下：

       Document       
人员列表
      
         
      名字      年龄     
             
      {{ item.name }}      {{ item.age }}     
       
  ​  ​     const vm = new Vue({    el: '#app',    data: {     keyWord:'',     list:[       { name: '张三', age: '18' },       { name: '张四', age: '17' },       { name: '张五', age: '17' },       { name: '老六', age: '18' },       { name: '老八', age: '18' },       { name: '小三', age: '19' },       { name: 'Xingyue', age: '18' },      ]     },    computed:{     fillist(){      // 返回过滤后的数组      return this.list.filter((p)=>{       return p.name.indexOf(this.keyWord) !==-1 || p.age.indexOf(this.keyWord) !==-1       })      }     }    })

2 watch 监听实现模糊查询

vue 中通过watch 监听实现模糊查询

vue 中通过计算属性实现模糊查询,创建 html 文件，代码直接放入即可。

完整代码如下：

       Document       
人员列表
      
         
      名字      年龄     
             
      {{ item.name }}      {{ item.age }}     
       
  ​  ​     const vm = new Vue({    el: '#app',    data: {     keyWord:'',     list:[       { name: '张三', age: '18' },       { name: '张四', age: '17' },       { name: '张五', age: '17' },       { name: '老六', age: '18' },       { name: '老八', age: '18' },       { name: '小三', age: '19' },       { name: 'Xingyue', age: '18' },      ],     fillist:[]     },    watch:{     keyWord:{      immediate:true,//在框的值还没变化时执行如下函数显示出所有的情况      handler(val){       this.fillist = this.list.filter((p)=>{        return p.name.indexOf(val) !==-1 || p.age.indexOf(val) !==-1        })       }      }     }    })   
演示和计算属性的一样。。

3 通过按钮点击实现模糊查询

这里我是在 vue-cli 中完成的，完整代码如下。

vue.app 代码：

           ​  
       
     姓名     年龄    
          
     {{ item.name }}     {{ item.age }}    
     
 ​export default { data() {  return {   value: '',   tableData: [     { name: '张三', age: '18' },     { name: '张四', age: '17' },     { name: '张五', age: '17' },     { name: '老六', age: '18' },     { name: '老八', age: '18' },     { name: '小三', age: '19' },     { name: 'Xingyue', age: '18' },    ],   //表格B用原表格的数据   tableDataB: [     { name: '张三', age: '18' },     { name: '张四', age: '17' },     { name: '张五', age: '17' },     { name: '老六', age: '18' },     { name: '老八', age: '18' },     { name: '小三', age: '19' },     { name: 'Xingyue', age: '18' },    ],   };  }, methods: {  // 点击搜索 支持模糊查询  search() {   //表格用原表格的数据 即 用于搜索的总数据   this.tableData = this.tableDataB;   //获取到查询的值，并使用toLowerCase():把字符串转换成小写，让模糊查询更加清晰   let _search = this.value.toLowerCase();   let newListData = []; // 用于存放搜索出来数据的新数组   if (_search) {    //filter 过滤数组    this.tableData.filter((item) => {     // newListData中 没有查询的内容，就添加到newListData中     if (      item.name.toLowerCase().indexOf(_search) !== -1 ||      item.age.toLowerCase().indexOf(_search) !== -1      ) {      newListData.push(item);      }     });    }   //查询后的表格 赋值过滤后的数据   this.tableData = newListData;   },  },}​

main.js 代码如下：

import Vue from 'vue'import App from './App.vue'​Vue.config.productionTip = false​new Vue({ render: h => h(App),}).$mount('#app')
​

整体结构：

演示：

输入关键字，点击查询：

大小写模糊查询：

写在最后

✨个人笔记博客✨

星月前端博客http://blog.yhxweb.top/

个人博客，记录前端学习笔记，欢迎收藏或者提意见。