本文實例為大家分享了vue實現(xiàn)多條件和模糊搜索的具體代碼，供大家參考，具體內(nèi)容如下

html

<div class="content"> <div class="right">  <select name="sex" width='100' v-model="formData.sex">  <option value="" selected>請選擇</option>  <option value="1">男</option>  <option value="2">女</option>  <option value="3">不是人</option>  </select>  <input type="text" v-model="formData.phone" placeholder="電話(精準搜索)">  <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; // 號碼 篩選  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(''); // 切割成 單個字   matchName = keys.every(key => item.name.toUpperCase().includes(key));  }  return matchName && matchPhone && matchSex;  }); }, },};

以上就是本文的全部內(nèi)容，希望對大家的學(xué)習有所幫助，也希望大家多多支持錯新站長站。