vue3筛选功能

      

        在Vue 3中实现筛选功能，通常涉及使用computed属性或者methods方法来对数据进行过滤。假设你有一个包含多个项目的数据列表，并希望能够根据用户输入的关键词对这些项目进行筛选，以下是一个简单的示例：

<template>
  <div>
    <input v-model="searchKeyword" type="text" placeholder="输入关键词筛选" />
    <ul>
      <li v-for="item in filteredItems" :key="item.id">{{ item.name }}</li>
    </ul>
  </div>
</template>

<script>
export default {
  data() {
    return {
      searchKeyword: '',
      items: [
        { id: 1, name: 'Apple' },
        { id: 2, name: 'Banana' },
        { id: 3, name: 'Orange' },
        { id: 4, name: 'Grapes' },
        // 更多项目...
      ],
    };
  },
  computed: {
    filteredItems() {
      // 使用computed属性来根据searchKeyword对items进行筛选
      return this.items.filter(item => {
        return item.name.toLowerCase().includes(this.searchKeyword.toLowerCase());
      });
    },
  },
};
</script>

      在上述示例中，我们有一个包含项目的数组 items，用户可以通过输入框中的 searchKeyword 来对项目进行筛选。我们使用v-model指令将输入框的值与 searchKeyword 数据属性进行双向绑定。

        然后，我们使用computed属性 filteredItems 来根据 searchKeyword 对 items 数组进行筛选。在computed属性中，我们使用 filter() 方法来遍历 items 数组，只保留那些 name 属性中包含 searchKeyword 的项目，不区分大小写。

        在模板中，我们使用 v-for 指令来遍历 filteredItems 数组，并渲染匹配的项目。

        这样，当用户在输入框中输入关键词时，列表中的项目将根据输入的关键词进行实时筛选显示。