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

