在Vue中实现多条件筛选功能可以使用computed属性和watch属性来实现。
首先，创建一个Vue实例，并在data中定义筛选条件的数据。
new Vue({
el: '#app',
data: {
items: [], // 原始数据
filters: {
type: '',
price: '',
color: ''
}
},
computed: {
filteredItems: function() {
// 使用computed属性过滤数据
return this.items.filter(item => {
// 判断每个数据项是否满足筛选条件
return (
(!this.filters.type || item.type === this.filters.type) &&
(!this.filters.price || item.price === this.filters.price) &&
(!this.filters.color || item.color === this.filters.color)
);
});
}
},
watch: {
filters: {
handler: function() {
// 使用watch属性监听筛选条件的变化
console.log(this.filteredItems);
},
deep: true
}
}
});
然后，在模板中定义筛选条件的输入框，并绑定到对应的数据。
<div id="app">
<select v-model="filters.type">
<option value="">All</option>
<option value="A">Type A</option>
<option value="B">Type B</option>
<option value="C">Type C</option>
</select>
<select v-model="filters.price">
<option value="">All</option>
<option value="10">10</option>
<option value="20">20</option>
<option value="30">30</option>
</select>
<select v-model="filters.color">
<option value="">All</option>
<option value="red">Red</option>
<option value="green">Green</option>
<option value="blue">Blue</option>
</select>
</div>
当筛选条件发生变化时，watch属性会监听到变化，并触发handler函数，从而更新筛选后的数据。你可以在handler函数中做相应的操作，比如将筛选结果渲染到页面上。
以上代码仅作为示例，具体的多条件筛选功能的实现方式会根据你的实际需求而有所不同。
