实训网站开发目的网站开发的风险与风险管理
在 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);}
}
在这个例子中，通过传递 this 作为 thisArg，可以在 callback 函数内部访问组件实例的属性和方法。