vue搜索和vue模糊搜索代碼實例
更新時間:2019年05月07日 11:28:12 作者:胭脂ing
這篇文章主要介紹了vue搜索和vue模糊搜索,文中通過示例代碼介紹的非常詳細,對大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價值,需要的朋友們下面隨著小編來一起學(xué)習(xí)學(xué)習(xí)吧
1、使用vue來實現(xiàn)一般搜索
<form action="" @submit="submitQuery" class="all_two">
<el-input v-model="input" placeholder="請輸入內(nèi)容" 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模糊搜索詳解整合,希望對大家有所幫助,如果大家有任何疑問請給我留言,小編會及時回復(fù)大家的。在此也非常感謝大家對腳本之家網(wǎng)站的支持!
相關(guān)文章
解決vue項目Error:Cannot find module‘xxx’類報錯問題
當(dāng)npm運行報錯Error:Cannot find module 'xxx'時,通常是因為node_modules文件或依賴未正確安裝,解決步驟包括刪除node_modules和package-lock.json文件,重新運行npm install,并根據(jù)需要安裝額外插件,若網(wǎng)絡(luò)問題導(dǎo)致安裝失敗2024-10-10
Vue-admin-template?添加、跳轉(zhuǎn)子頁面問題
這篇文章主要介紹了Vue-admin-template?添加、跳轉(zhuǎn)子頁面問題,具有很好的參考價值,希望對大家有所幫助。如有錯誤或未考慮完全的地方,望不吝賜教2022-10-10

