vue实现模糊搜索
在vue中,模糊搜索主要是用computed属性实现.filter() 方法创建一个新的数组,新数组中的元素是通过检查指定数组中符合条件的所有元素,不会改变原数组。具体代码实现如下:<div calss="nav-box"><el-input class="nav-inp" prefix-icon="el-icon-search" v-model="keyword" placeh
·
在vue中,模糊搜索主要是用computed属性实现.
方法一:filter() 方法创建一个新的数组,新数组中的元素是通过检查指定数组中符合条件的所有元素,不会改变原数组。
具体代码实现如下:
<div calss="nav-box">
<el-input class="nav-inp" prefix-icon="el-icon-search" v-model="keyword" placeholder="请输入关键字"></el-input>
<ul>
<li v-for="(item,index) in searchResult" :key="index" @click="chooseClick(index) " :class="{active:index==isActive}" >{{item}}</li>
</ul>
</div>
js部分
export default {
data(){
return {
keyword:'',
//从接口获取展示数据存入其中
Chinese:[]
}
},
computed:{
searchResult(){
if(this.keyword){
return this.Chinese.filter((value)=>{
return value.includes(this.keyword);
});
}else{
return this.Chinese;
}
}
},
}
方法二:使用 new RegExp(val)
//监听搜索关键词的变化,变化时执行
watch: {
//搜索的关键词
searchValue: {
handler(val) {
//如果搜索关键词为空,返回所有数据
if(val === '') {
this.eventList = lodash.cloneDeep(this.tempList);
}else {
//返回包含关键词的数据
this.eventList = this.tempList.filter(item => {
let reg = new RegExp(val);
return reg.test(item.serialNumber) || reg.test(item.responseTitle);
});
}
}
}
}
更多推荐
已为社区贡献1条内容
所有评论(0)