设置数据和搜索词
首先,在组件中定义用于存储数据和搜索词的变量。数据列表将存储原始项,搜索词用于过滤显示。
<template>
<div>
<input v-model="searchTerm" type="text" placeholder="Enter search term" />
<ul>
<li v-for="item in filteredItems" :key="item.id">{{ item.name }}</li>
</ul>
</div>
</template>
<script>
export default {
data() {
return {
items: [
{ id: 1, name: "Item 1" },
{ id: 2, name: "Item 2" }
],
searchTerm: "",
};
},
};
</script>
创建计算属性
创建一个计算属性根据搜索词过滤数据列表并返回结果。
computed: {
filteredItems() {
return this.items.filter((item) =>
item.name.toLowerCase().includes(this.searchTerm.toLowerCase())
);
},
},
实现搜索功能
随着搜索词输入,计算属性会自动更新并返回匹配的项目列表。上述代码中,计算属性 filteredItems 使用 filter() 方法过滤 items 数组,保留 name 属性包含搜索词的项目。toLowerCase() 确保搜索不区分大小写,无论用户输入大写或小写字母均能正确匹配。
这样,Vue 3 组件即具备搜索功能。用户可在输入框中输入搜索词,组件根据输入内容过滤并展示匹配的项目列表。

