vue3 list使用filters语法

在Vue 3中，`filters`选项已经被弃用了，取而代之的是更强大的计算属性（Computed Properties）。如果你想实现类似列表过滤的功能，你可以使用`filterMethod`选项配合`v-for`指令。`filterMethod`允许你在用户输入时动态筛选数组元素。

例如，假设你有一个`items`数组，你可以这样做：

<template>
  <div>
    <input v-model="searchTerm" placeholder="Search...">
    <ul>
      <li v-for="item in filteredItems" :key="item.id">
        {{ item.name }}
      </li>
    </ul>
  </div>
</template>

<script>
export default {
  data() {
    return {
      searchTerm: '',
      items: [
        // ... 这里是你的一组数据项
      ],
    };
  },
  computed: {
    filteredItems() {
      if (!this.searchTerm) return this.items;
      return this.items.filter((item) => item.name.includes(this.searchTerm));
    },
  },
};
</script>

在这个例子中，当你在输入框中输入搜索词，`filteredItems`计算属性会实时更新，只显示包含搜索词的列表项。