Vue 提供了強大的列表過濾功能，讓我們在渲染頁面時，輕松地篩選出需要的信息。下面讓我們來看看如何使用 Vue 的列表過濾。

首先，我們需要一個數據列表，假設我們有一個存儲用戶信息的數組 userList，其中有每個用戶的姓名、性別、年齡等信息。

data() {
return {
userList: [
{ name: '小明', sex: 1, age: 18 },
{ name: '小紅', sex: 0, age: 20 },
{ name: '張三', sex: 1, age: 22 },
{ name: '李四', sex: 1, age: 25 },
{ name: '王五', sex: 0, age: 28 }
],
searchKey: ''   // 搜索關鍵字，初始為空值
}
},

接著，我們可以在 HTML 中使用 v-for 去遍歷這個數據列表并渲染出來。同時，我們也可以在輸入框中監聽用戶的輸入，來實現實時搜索的功能。

{{ user.name }} - {{ user.sex }} - {{ user.age }}

在這里，我們使用了一個計算屬性 filteredUsers 去篩選數據。在這個計算屬性中，我們使用了 JavaScript 的過濾器函數 filter() 來過濾出符合搜索關鍵字的數據。

computed: {
filteredUsers() {
return this.userList.filter((user) =>{
return user.name.indexOf(this.searchKey) !== -1 || user.age.toString().indexOf(this.searchKey) !== -1
})
}
}

最后，當用戶輸入關鍵字時，我們就可以實時渲染出符合條件的數據了。

Vue 的列表過濾功能非常簡單易用，但卻十分強大。通過這個功能，我們可以快速篩選出需要的數據，為用戶提供更好的使用體驗。