vue3搜索功能

     

目录

设置数据和搜索词：

创建计算属性：

实现搜索功能：

---

    在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" },
        // Add more items as needed
      ],
      searchTerm: "",
    };
  },
};
</script>

创建计算属性：

接下来，你需要创建一个计算属性来根据搜索词过滤数据列表并返回过滤后的结果。

<script>
export default {
  data() {
    // ...
  },
  computed: {
    filteredItems() {
      return this.items.filter((item) =>
        item.name.toLowerCase().includes(this.searchTerm.toLowerCase())
      );
    },
  },
};
</script>

实现搜索功能：

现在，随着搜索词的输入，计算属性会自动更新并返回匹配搜索词的项目列表，从而实现搜索功能。

       上述代码中，计算属性filteredItems通过使用filter()方法来过滤items数组，只保留那些name属性包含搜索词的项目。toLowerCase()用于确保搜索是不区分大小写的，这样不管用户输入的是大写还是小写字母，都能正确地进行匹配。

       这样，你的Vue 3组件现在应该具备搜索功能了。用户可以在输入框中输入搜索词，组件会根据输入的内容过滤并展示匹配的项目列表。