vue3中filter的用法

在Vue 3中，`filter`已被废弃，推荐使用计算属性（computed）或者方法（methods）来替代。计算属性和方法在Vue 3中可以实现相同的功能。

1. 使用计算属性（computed）：
在Vue 3中，可以使用计算属性（computed）来实现过滤功能。计算属性会根据依赖的数据自动更新，类似于过滤器的效果。下面是一个示例：

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

   <script>
   import { ref, computed } from 'vue';

   export default {
     setup() {
       const items = ref([
         { id: 1, name: 'Apple' },
         { id: 2, name: 'Banana' },
         { id: 3, name: 'Orange' },
       ]);
       const searchText = ref('');

       const filteredItems = computed(() => {
         return items.value.filter(item => item.name.includes(searchText.value));
       });

       return {
         searchText,
         filteredItems
       };
     }
   }
   </script>

在上面的示例中，我们使用`computed`创建了一个计算属性`filteredItems`，它会根据`searchText`和`items`的值动态计算出过滤后的结果并返回。

2. 使用方法（methods）：
另一种替代方案是使用方法（methods）来实现同样的过滤功能。下面是一个示例：

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

   <script>
   import { ref } from 'vue';

   export default {
     setup() {
       const items = ref([
         { id: 1, name: 'Apple' },
         { id: 2, name: 'Banana' },
         { id: 3, name: 'Orange' },
       ]);
       const searchText = ref('');

       function filterItems() {
         return items.value.filter(item => item.name.includes(searchText.value));
       }

       return {
         searchText,
         getFilteredItems: filterItems
       };
     }
   }
   </script>

在上面的示例中，我们使用`methods`创建了一个方法`filterItems`，它会根据`searchText`和`items`的值动态计算出过滤后的结果并返回。