在Vue項目中，經常會使用input元素來進行篩選操作。

首先，我們需要在data中定義一個數組來存儲數據。在模板中，使用v-for指令進行循環渲染。在篩選框中，我們將v-model與篩選變量相綁定，通過過濾器函數篩選出我們需要的結果。

data() {
return {
dataList: [{
name: 'John',
age: 18,
gender: 'male'
},
{
name: 'Lily',
age: 20,
gender: 'female'
},
{
name: 'Bob',
age: 19,
gender: 'male'
}],
searchStr: '', // 篩選字段
}
},
computed: {
filteredList() {
let result = this.dataList.filter(item =>{
return item.name.includes(this.searchStr);
})
return result;
}
}

模板中的篩選框：

<input v-model="searchStr">

接下來，我們需要在模板中使用v-for指令展示數據。由于數據已經經過篩選過濾，因此展示的數據已經是符合要求的數據。

<ul>
<li v-for="item in filteredList" :key="item">
<p>{{ item.name }}</p>
<p>{{ item.age }}</p>
<p>{{ item.gender }}</p>
</li>
</ul>

最后，我們需要對篩選函數進行優化，讓其可以篩選多個字段。這時候我們可以使用ES6的解構賦值來減少代碼量，同時將數據篩選函數提取成一個獨立的方法，讓代碼更加清晰易讀。

computed: {
filteredList() {
let filterFn = (item, field) =>{
return item[field].includes(this.searchStr);
}
let result = this.dataList.filter(item =>{
return filterFn(item, 'name') || filterFn(item, 'age') || filterFn(item, 'gender');
})
return result;
}
}

在mouted生命周期中，我們可以通過$refs屬性獲取到input元素，然后自動聚焦，提升用戶體驗。

mounted() {
this.$refs.search.focus();
}

至此，我們已經完成了Vue項目中input篩選的基本功能。