微客导航 » 文章资讯 » vue input输入框关键字筛选检索列表数据展示

vue input输入框关键字筛选检索列表数据展示

2023-08-22 22:42:06 174

想必大家在项目开发中难免会用到关键字筛选的功能，正好这次项目有需求要做这一块，就整理一下vue的input输入框输入关键字检索数据列表的代码。下面直接上代码：

html：

匹配（所有||单个）字段 >js：

exportdefault{
data(){
return{
search:'',
list:[
{name:'AAA',msg:'aaa文本介绍1'},
{name:'BBB',msg:'bbb文本介绍2'},
{name:'CCC',msg:'ccc文本介绍3'},
{name:'DDD',msg:'ddd文本介绍4'},
{name:'EEE',msg:'eee文本介绍5'},
]
}
},

computed:{
//过滤方法
items:function(){
var_search=this.search;
if(_search){
//不区分大小写处理
varreg=newRegExp(_search,'ig')
//es6filter过滤匹配，有则返回当前，无则返回所有
returnthis.list.filter(function(e){
//匹配所有字段
returnObject.keys(e).some(function(key){
returne[key].match(reg);
})
//匹配某个字段
//returne.name.match(reg);
})
};
returnthis.list;
}
},
}

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

更多vue学习教程请阅读专题《vue实战教程》

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

返回顶部
3162201930
czq8825@qq.com

vue input输入框关键字筛选检索列表数据展示

热门推荐

随机推荐