filter函数 vue3

filter函数是JavaScript中的一个高阶函数，它用于从数组中筛选出符合指定条件的元素，并返回一个新的数组。在Vue3中，filter函数也可以用于对数组进行筛选操作。

在Vue3中，filter函数可以通过以下方式使用：

1. 在模板中使用filter函数：

   <template>
     <div>
       <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', category: 'fruit' },
         { id: 2, name: 'Banana', category: 'fruit' },
         { id: 3, name: 'Carrot', category: 'vegetable' },
       ]);

       const filteredItems = computed(() => {
         return items.value.filter(item => item.category === 'fruit');
       });

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

在上述代码中，我们使用了Vue3的`ref`和`computed`函数来创建响应式的数据和计算属性。通过`filter`函数，我们筛选出了`category`为'fruit'的元素，并将结果赋值给`filteredItems`计算属性。在模板中，我们使用`v-for`指令遍历`filteredItems`数组，并渲染每个元素的名称。

2. 在JavaScript代码中使用filter函数：

   const items = [
     { id: 1, name: 'Apple', category: 'fruit' },
     { id: 2, name: 'Banana', category: 'fruit' },
     { id: 3, name: 'Carrot', category: 'vegetable' },
   ];

   const filteredItems = items.filter(item => item.category === 'fruit');
   console.log(filteredItems);

在上述代码中，我们直接使用`filter`函数对`items`数组进行筛选，将`category`为'fruit'的元素筛选出来，并将结果打印到控制台。