Vue 3 组件中实现搜索过滤功能

设置数据和搜索词

首先，在组件中定义用于存储数据和搜索词的变量。数据列表将存储原始项，搜索词用于过滤显示。

<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 组件即具备搜索功能。用户可在输入框中输入搜索词，组件根据输入内容过滤并展示匹配的项目列表。