在Vue中實(shí)現(xiàn)模糊查詢，你可以使用JavaScript的filter和includes方法，結(jié)合Vue的v-for指令。下面是一個(gè)簡(jiǎn)單的例子：

首先，你需要在你的Vue實(shí)例中定義一個(gè)數(shù)據(jù)數(shù)組和一個(gè)查詢字符串。

data() {
return {
items: ['Apple', 'Banana', 'Cherry', 'Date', 'Elderberry'],
query: ''
}
}

然后，你可以在你的模板中使用v-for來遍歷這個(gè)數(shù)組，并使用v-model來綁定查詢字符串。

<input v-model="query" type="text" placeholder="Search...">
<ul>
<li v-for="item in filteredItems" :key="item">
{{ item }}
</li>
</ul>

在上面的代碼中，filteredItems是一個(gè)計(jì)算屬性，它會(huì)返回過濾后的數(shù)組。你可以使用JavaScript的filter和includes方法來實(shí)現(xiàn)模糊查詢。

computed: {
filteredItems() {
return this.items.filter(item => item.toLowerCase().includes(this.query.toLowerCase()));
}
}

在上面的代碼中，filter方法會(huì)遍歷數(shù)組中的每個(gè)元素，并返回一個(gè)新的數(shù)組，該數(shù)組只包含滿足條件的元素。includes方法會(huì)檢查一個(gè)字符串是否包含另一個(gè)字符串。在這個(gè)例子中，我們使用toLowerCase方法將字符串轉(zhuǎn)換為小寫，以便進(jìn)行不區(qū)分大小寫的查詢。

當(dāng)使用Vue3實(shí)現(xiàn)模糊查詢時(shí)，你可以利用Vue的響應(yīng)式特性和計(jì)算屬性來實(shí)現(xiàn)。下面是一個(gè)簡(jiǎn)單的說明和代碼示例：

說明：

• 創(chuàng)建一個(gè)Vue3組件，并引入必要的依賴。
• 在組件的setup()函數(shù)中，定義數(shù)據(jù)和計(jì)算屬性。
• 使用v-model指令將輸入框的值綁定到數(shù)據(jù)屬性上。
• 定義一個(gè)計(jì)算屬性filteredItems，根據(jù)輸入框的值過濾數(shù)據(jù)數(shù)組。
• 在模板中使用v-for指令遍歷過濾后的數(shù)據(jù)數(shù)組，并顯示每個(gè)元素。

代碼示例：

<template>
<div>
<input v-model="searchQuery" type="text" placeholder="Search...">
<ul>
<li v-for="item in filteredItems" :key="item.id">
{{ item.name }}
</li>
</ul>
</div>
</template>
 
<script>
import { ref } from 'vue';
 
export default {
setup() {
const items = ref([
{ id: 1, name: 'Apple' },
{ id: 2, name: 'Banana' },
{ id: 3, name: 'Cherry' },
{ id: 4, name: 'Date' },
{ id: 5, name: 'Elderberry' }
]);
const searchQuery = ref('');
const filteredItems = computed(() => {
if (!searchQuery.value) return items.value;
return items.value.filter(item => item.name.toLowerCase().includes(searchQuery.value.toLowerCase()));
});
return { items, searchQuery, filteredItems };
}
};
</script>

在上面的代碼中，我們首先導(dǎo)入了Vue3的ref函數(shù)，用于創(chuàng)建響應(yīng)式引用。然后，在組件的setup()函數(shù)中，我們定義了兩個(gè)響應(yīng)式引用items和searchQuery，分別表示數(shù)據(jù)數(shù)組和查詢字符串。接下來，我們定義了一個(gè)計(jì)算屬性filteredItems，根據(jù)輸入框的值過濾數(shù)據(jù)數(shù)組。最后，在模板中，我們使用v-model指令將輸入框的值綁定到searchQuery上，并使用v-for指令遍歷filteredItems數(shù)組，顯示每個(gè)項(xiàng)目的名稱。當(dāng)輸入框的值發(fā)生變化時(shí)，計(jì)算屬性會(huì)自動(dòng)更新，并觸發(fā)重新渲染。

以上就是Vue實(shí)現(xiàn)模糊查詢的簡(jiǎn)單示例的詳細(xì)內(nèi)容，更多關(guān)于Vue實(shí)現(xiàn)模糊查詢的資料請(qǐng)關(guān)注腳本之家其它相關(guān)文章！

最新評(píng)論