vue實(shí)現(xiàn)多條件和模糊搜索功能
更新時(shí)間:2019年05月28日 09:33:16 作者:zhooson
這篇文章主要為大家詳細(xì)介紹了vue實(shí)現(xiàn)多條件和模糊搜索功能,具有一定的參考價(jià)值,感興趣的小伙伴們可以參考一下
本文實(shí)例為大家分享了vue實(shí)現(xiàn)多條件和模糊搜索的具體代碼,供大家參考,具體內(nèi)容如下
html
<div class="content"> <div class="right"> <select name="sex" width='100' v-model="formData.sex"> <option value="" selected>請(qǐng)選擇</option> <option value="1">男</option> <option value="2">女</option> <option value="3">不是人</option> </select> <input type="text" v-model="formData.phone" placeholder="電話(精準(zhǔn)搜索)"> <input type="text" v-model="formData.name" placeholder="姓名(模糊搜索)"> <button @click="search(formData)">提交數(shù)據(jù)</button> </div> <div class="left"> <ul> <li v-for="(item,index) in realList" :key="index"> {{item.name}} || {{item.phone}} || {{item.sex | filterSex}} </li> </ul> </div> </div>
js
export default { name: 'styleTest', data() { return { formData: { name: '', phone: '', sex: '', }, realList: [], list: [ { name: '張址', phone: 18715023011, sex: 1, }, { name: '張三', phone: 18715023012, sex: 2, }, { name: '李四', phone: 18715023013, sex: 1, }, { name: '趙武', phone: 18715023014, sex: 2, }, { name: '晉南', phone: 18715023015, sex: 1, }, { name: '張東', phone: 18715023016, sex: 2, }, ], }; }, filters: { filterSex(val) { switch (val) { case 1: return '男'; break; case 2: return '女'; break; case 3: return '不是人'; break; default: return '男'; } }, }, computed: { // realList() { // let { name, phone, sex } = this.formData; // if (name && phone && sex) { // return this.list; // } // }, }, created() { this.search({}); }, methods: { search({ name, phone, sex }) { this.realList = this.list.filter(item => { let matchName = true; // 姓名 篩選 let matchSex = true; // 性別 篩選 let matchPhone = true; // 號(hào)碼 篩選 if (sex) { matchSex = item.sex == sex; } if (phone) { // console.info(Object.prototype.toString.call(phone)); matchPhone = item.phone == phone; } if (name) { // 模糊搜索; const keys = name .toUpperCase() // 轉(zhuǎn)大寫 .replace(' ', '') // 刪掉空格 .split(''); // 切割成 單個(gè)字 matchName = keys.every(key => item.name.toUpperCase().includes(key)); } return matchName && matchPhone && matchSex; }); }, }, };
以上就是本文的全部?jī)?nèi)容,希望對(duì)大家的學(xué)習(xí)有所幫助,也希望大家多多支持腳本之家。
相關(guān)文章
vue項(xiàng)目中使用this.$confirm解析
這篇文章主要介紹了vue項(xiàng)目中使用this.$confirm方式,具有很好的參考價(jià)值,希望對(duì)大家有所幫助。如有錯(cuò)誤或未考慮完全的地方,望不吝賜教2022-09-09vue3.0關(guān)閉eslint校驗(yàn)的3種方法詳解
這篇文章主要給大家介紹了關(guān)于vue3.0關(guān)閉eslint校驗(yàn)的3種方法,在實(shí)際開發(fā)過程中,eslint的作用不可估量,文中將關(guān)閉的方法介紹的非常詳細(xì),需要的朋友可以參考下2023-06-06nuxt實(shí)現(xiàn)封裝axios并且獲取token
這篇文章主要介紹了nuxt實(shí)現(xiàn)封裝axios并且獲取token,具有很好的參考價(jià)值,希望對(duì)大家有所幫助,如有錯(cuò)誤或未考慮完全的地方,望不吝賜教2023-10-10