vue搜索和vue模糊搜索代码实例
编程学习 2021-07-04 15:50www.dzhlxh.cn编程入门
这篇文章主要介绍了vue搜索和vue模糊搜索，文中通过示例代码介绍的非常详细，对大家的学习或者工作具有一定的参考学习价值，需要的朋友们狼蚁网站SEO优化随着长沙网络推广来一起学习学习吧
1、使用vue来实现一般搜索
<form action="" @submit="submitQuery" class="all_two">
<el-input v-model="input" placeholder="请输入内容" ref="search" style="width:300px;"></el-input>
</form>
<div class="all_three">
<div v-for="item in this.$store.state.chufang.alldata">
<div v-for="item1 in queryDate(item.cabinet)" >
<input type="checkbox" name="checkbox" value="checkbox" style="zoom:200%;" :checked="item1.checks==0? true:false">
<span>{{item1.name}}</span>
</div>
</div>
</div
submitQuery:function(){
this.query = this.$refs.search.value.trim();
},
queryDate:function(list){
if (this.query === '') {
return list
}
return list.filter((item)=>{
if(item.name.indexOf(this.query) != -1){
return item;
}
})
},
2、vue模糊搜索，原理都是一样的
<el-form :inline="true" :model="formInline" class="demo-form-inline mt15">
<el-form-item>
<el-input v-model="formInline.name" ref="search" placeholder="姓名"></el-input>
</el-form-item>
<el-form-item>
<el-input v-model="formInline.phone" ref="search1" placeholder="手机号"></el-input>
</el-form-item>
<el-form-item>
<el-button type="primary" @click="onSubmit">筛选</el-button>
</el-form-item>
</el-form>
onSubmit() {
this.query = this.$refs.search.value.trim();
this.query1 = this.$refs.search1.value.trim();
},
queryDate:function(list){
if (this.query === '' && this.query1 === '') {
return list
}
else if (this.query !== '' && this.query1 === '') {
return list.filter(item => {
if (item.name.indexOf(this.query) !== -1) {
return item
}
})
}
else if (this.query === '' && this.query1 !== '') {
return list.filter(item => {
if (item.mobile.indexOf(this.query1) !== -1) {
return item
}
})
}
else if (this.query !== '' && this.query1 !== '') {
return list.filter(item => {
if (item.name.indexOf(this.query) !== -1 && item.mobile.indexOf(this.query1) !== -1) {
return item
}
})
}
},
以上所述是长沙网络推广给大家介绍的vue搜索和vue模糊搜索详解整合，希望对大家有所帮助，如果大家有任何疑问请给我留言，长沙网络推广会及时回复大家的。在此也非常感谢大家对狼蚁SEO网站的支持！