当前位置：首页 > news >正文

Vue中filter的使用

news 2025/6/25 13:02:49

在 Vue.js 中，filter() 方法用于创建一个新数组，其中包含通过所提供函数实现的测试的所有元素。filter() 不会改变原数组，而是返回一个新的数组。

语法

array.filter(callback(element[, index[, array]])[, thisArg])

callback：函数，用于测试每个元素。接收三个参数：
- element：数组中当前处理的元素。
- index（可选）：当前元素的索引。
- array（可选）：调用 filter 的数组。
thisArg（可选）：执行 callback 时，用作 this 的值。

基本用法

以下是一些基本的 filter 用法示例：

过滤数字数组中的偶数

let numbers = [1, 2, 3, 4, 5, 6];
let evenNumbers = numbers.filter(number => number % 2 === 0);
console.log(evenNumbers); // [2, 4, 6]

过滤对象数组中的特定属性值

let users = [{ name: 'Alice', age: 25 },{ name: 'Bob', age: 30 },{ name: 'Charlie', age: 20 }
];let adults = users.filter(user => user.age >= 21);
console.log(adults); 
/*
[{ name: 'Alice', age: 25 },{ name: 'Bob', age: 30 }
]
*/

在 Vue.js 中使用 filter

在 Vue.js 组件中，filter 方法常用于以下场景：

显示符合特定条件的数据：根据用户输入或其他条件动态过滤数据。
搜索功能：根据关键字过滤列表。

示例：动态过滤列表

<template><div><input v-model="searchQuery" placeholder="搜索用户"><ul><li v-for="(user, index) in filteredUsers" :key="index">{{ user.name }} - {{ user.age }}</li></ul></div>
</template><script>
export default {data() {return {searchQuery: '',users: [{ name: 'Alice', age: 25 },{ name: 'Bob', age: 30 },{ name: 'Charlie', age: 20 }]};},computed: {filteredUsers() {return this.users.filter(user => {return user.name.toLowerCase().includes(this.searchQuery.toLowerCase());});}}
};
</script>

在这个示例中：

searchQuery 是一个绑定到输入框的模型，用于存储用户输入的搜索关键字。
filteredUsers 计算属性根据 searchQuery 对 users 数组进行过滤，返回名字包含搜索关键字的用户列表。

复杂过滤条件

可以结合多个条件来过滤数组。例如，过滤出年龄大于等于 21 且名字包含特定字符的用户：

computed: {filteredUsers() {return this.users.filter(user => {return user.age >= 21 && user.name.toLowerCase().includes(this.searchQuery.toLowerCase());});}
}

这种方法非常灵活，可以根据需要组合多种条件进行过滤。

使用 thisArg

thisArg 参数允许在 callback 函数内部使用指定的 this 值。例如：

computed: {filteredUsers() {return this.users.filter(function(user) {return user.age >= 21 && user.name.toLowerCase().includes(this.searchQuery.toLowerCase());}, this);}
}