vueは多条件とあいまいな検索機能を実現します。
本論文の例では、Vueが多条件とあいまいな検索を実現する具体的なコードを共有しています。
html
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)"> </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() //
.replace(' ', '') //
.split(''); //
matchName = keys.every(key => item.name.toUpperCase().includes(key));
}
return matchName && matchPhone && matchSex;
});
},
},
};
以上が本文の全部です。皆さんの勉強に役に立つように、私たちを応援してください。