vue中列表filter方法的作用

简介

‌Vue中使用List.filter方法主要用于过滤数组中的元素。‌ List.filter方法可以基于提供的条件函数返回一个新的数组，包含所有通过测试（即满足条件）的元素，原数组不会被修改。

基本用法

在Vue中，你可以在methods中定义一个方法来使用List.filter进行过滤。例如，要删除数组中id为27的元素，可以这样做：

javascript
Copy Code
methods: {del(id) {this.fruitList = this.fruitList.filter(item => item.id !== id)}
}

这段代码定义了一个del方法，用于删除fruitList中id等于传入参数id的元素‌

在模板中使用

在Vue模板中，可以直接在v-for指令中使用.filter方法来筛选数组。这种方式适用于简单的筛选逻辑，能够快速实现数据过滤：

<template><div><ul><li v-for="item in items.filter(item => item.active)" :key="item.id">{{ item.name }}</li></ul></div>
</template>

这段代码会渲染所有active属性为true的items到页面上‌

计算属性中的使用

使用计算属性来进行数组筛选是更推荐的做法，尤其在筛选逻辑复杂或需要多次重用的情况下。这种方式可以使模板更简洁，并且计算属性的缓存特性也能提升性能：

computed: {filteredItems() {return this.items.filter(item => item.active)}
}

这段代码定义了一个计算属性filteredItems，它返回所有active属性为true的items数组。在模板中，你可以直接使用这个计算属性来渲染数据：

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