小编给大家分享一下如何实现vue搜索和vue模糊搜索，相信大部分人都还不怎么了解，因此分享这篇文章给大家参考一下，希望大家阅读完这篇文章后大有收获，下面让我们一起去了解一下吧！
1、使用vue来实现一般搜索
计算
安全
数据库
网络和加速
企业服务
<form action="" @submit="submitQuery" class="all_two">
<el-input v-model="input" placeholder="请输入内容" ref="search" ></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" :checked="item1.checks==0? true:false">
<span>{{item1.name}}</span>
</div>
</div>
</divsubmitQuery: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="search2" 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.search2.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模糊搜索”这篇文章的所有内容，感谢各位的阅读！相信大家都有了一定的了解，希望分享的内容对大家有所帮助，如果还想学习更多知识，欢迎关注亿速云行业资讯频道！
亿速云「云服务器」，即开即用、新一代英特尔至强铂金CPU、三副本存储NVMe SSD云盘，价格低至29元/月。点击查看>>
免责声明：本站发布的内容（图片、视频和文字）以原创、转载和分享为主，文章观点不代表本网站立场，如果涉及侵权请联系站长邮箱：is@yisu.com进行举报，并提供相关证据，一经查实，将立刻删除涉嫌侵权内容。
