在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函數中做相應的操作，比如將篩選結果渲染到頁面上。
以上代碼僅作為示例，具體的多條件篩選功能的實現方式會根據你的實際需求而有所不同。
