在Vue中實現列表篩選功能有多種方法，以下是其中一種常見的做法：
1. 創建一個Vue組件，用于顯示列表和處理篩選邏輯。
<template><div>
<input v-model="filterText" placeholder="輸入關鍵字篩選">
<ul>
<li v-for="item in filteredList" :key="item.id">{{ item.name }}</li>
</ul>
</div>
</template>
<script>
export default {
data() {
return {
filterText: '',
list: [
{ id: 1, name: 'Item 1' },
{ id: 2, name: 'Item 2' },
{ id: 3, name: 'Item 3' },
],
};
},
computed: {
filteredList() {
return this.list.filter(item => {
return item.name.includes(this.filterText);
});
},
},
};
</script>
在上面的示例中，我們使用了一個輸入框（<input>）來獲取用戶的篩選關鍵字，并使用v-model指令將輸入框的值綁定到filterText數據屬性上。
在computed計算屬性中，我們使用filter()方法來過濾列表項，只顯示包含篩選關鍵字的項。
最后，在模板中使用v-for指令遍歷filteredList，并通過:key綁定每個列表項的唯一標識符。
你可以根據需要自定義樣式、添加更多篩選條件或使用其他方法來實現列表篩選功能。
