vue实现输入输入框的模糊查询方法

本文分享vue输入法输入框模糊查询方法的具体代码，供大家参考。具体内容如下

原理：原生js的indexOf()方法，将从头到尾检索数组，看是否包含对应的元素。开始检索的位置在数组的开头或数组的开头(如果未指定start参数)。如果找到一个项目，则返回该项目的第一个匹配项。起始位置的索引为0。

如果在数组中找不到指定的元素，则返回-1。

让我们先看看这个例子：

搜索前：

搜索后：

实现方法：

Methods:{ //点击搜索项目search(){ //支持模糊查询//this.xmgcqkJsonsData:用于搜索的总数据//toLowerCase():用于将字符串转换为小写，使模糊查询更加清晰let _ search=this . jobno . to lower case()；让newListData=[]；//新数组if(_ search){ this . xmgcqkjonsdata . filter(item={ if(item . code . to lower case()。(_ search)的索引！==-1){ newlistdata . push(item)；} })} this . xmgcqkjsonsdata=newListData；//console.log('新数组，新列表数据)}。}以上方法基于工单编号/序列号。如果在当前搜索中添加其他条件，如项目/项目名称，则只需在原始代码中添加一个判断条件，如：

if (item.code.toLowerCase()。indexOf(_search)！==-1 || item.name.toLowerCase()。indexOf(_search)！==-1){ newlistdata . push(item)；}这就是如何实现vue输入输入框的模糊查询。

点击《Vue.js前端组件学习教程》获取更多教程。欢迎学习和阅读。

关于vue.js组件的教程，请点击专题vue.js组件学习教程学习。

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