在Vue中實現搜索框的模糊查詢可以使用以下步驟:
1. 在Vue組件的data屬性中定義一個變量來存儲搜索關鍵字,例如searchKeyword。
2. 在模板中添加一個輸入框用于輸入搜索關鍵字,并將它的值綁定到searchKeyword變量上,例如:
<input type="text" v-model="searchKeyword">
3. 對要進行模糊查詢的數據進行過濾。可以使用Vue的計算屬性來實現這個過濾邏輯。首先將需要進行查詢的數據存儲在一個數組中。然后創建一個計算屬性,返回過濾后的結果。例如:
<template><div>
<input type="text" v-model="searchKeyword">
<ul>
<li v-for="item in filteredItems">{{ item }}</li>
</ul>
</div>
</template>
<script>
export default {
data() {
return {
searchKeyword: '',
items: ['apple', 'banana', 'cherry', 'date']
}
},
computed: {
filteredItems() {
return this.items.filter(item => {
return item.includes(this.searchKeyword);
});
}
}
}
</script>
在上述代碼中,filteredItems計算屬性返回了一個過濾后的結果數組,只包含那些包含搜索關鍵字的項。
4. 最后,通過在模板中使用`v-for`指令循環遍歷filteredItems數組,并展示查詢結果。
這樣,當用戶在搜索框中輸入關鍵字時,只有包含該關鍵字的項會顯示出來,實現了模糊查詢的效果。