在Vue中實現篩選查詢功能可以分為以下幾個步驟：
1. 創建數據：首先，你需要在Vue組件中定義一個數組或對象來存儲需要篩選的數據。例如，你可以在data選項中定義一個名為items的數組：
data() { return {
items: [
{ name: 'Apple', category: 'Fruit' },
{ name: 'Banana', category: 'Fruit' },
{ name: 'Carrot', category: 'Vegetable' },
// ...
],
filterText: ''
};
}
2. 創建篩選方法：接下來，你需要創建一個篩選方法，該方法將根據用戶輸入的關鍵字篩選數據。這個方法可以使用computed屬性或者普通的方法。下面是一個使用`computed`屬性的例子：
computed: { filteredItems() {
if (this.filterText) {
return this.items.filter(item => {
// 使用關鍵字篩選
return item.name.toLowerCase().includes(this.filterText.toLowerCase());
});
}
return this.items;
}
}
這里filteredItems計算屬性會根據filterText的值返回篩選后的數據。
3. 綁定輸入框：在模板中，你需要創建一個輸入框，用于接收用戶輸入的關鍵字，并與filterText進行雙向綁定：
<input v-model="filterText" type="text" placeholder="Enter keyword">
4. 顯示篩選結果：最后，你可以在模板中使用filteredItems來顯示篩選后的結果：
<ul><li v-for="item in filteredItems" :key="item.name">{{ item.name }}</li>
</ul>
這里使用了v-for指令遍歷filteredItems數組，并將每個元素的name屬性展示出來。
通過以上步驟，你就可以實現一個簡單的篩選查詢功能。用戶輸入關鍵字后，會根據關鍵字篩選數據并顯示在界面上。
