vue2如何实现多条件查询
时间: 2023-10-13 13:22:04 浏览: 70
Vue2实现多条件查询可以使用computed属性来处理,结合v-model实现数据双向绑定,在computed中通过数组的filter()函数对数据进行筛选。具体实现可以参考下面的代码:
HTML:
```
<div>
<input type="text" v-model="searchQuery1">
<input type="text" v-model="searchQuery2">
<ul>
<li v-for="item in filteredItems">{{ item }}</li>
</ul>
</div>
```
Vue代码:
```
data() {
return {
searchQuery1: '',
searchQuery2: '',
items: ['Apple', 'Orange', 'Banana', 'Grape', 'Pineapple']
}
},
computed: {
filteredItems: function () {
let query1 = this.searchQuery1.trim().toLowerCase();
let query2 = this.searchQuery2.trim().toLowerCase();
if (query1 && query2) {
return this.items.filter(item => {
return item.toLowerCase().includes(query1) && item.toLowerCase().includes(query2);
});
} else if (query1) {
return this.items.filter(item => {
return item.toLowerCase().includes(query1);
});
} else if (query2) {
return this.items.filter(item => {
return item.toLowerCase().includes(query2);
});
} else {
return this.items;
}
}
}
```