本文分享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组件学习教程学习。
以上就是本文的全部内容。希望对大家的学习有帮助,支持我们。