Vue中filter的使用

在 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 方法常用于以下场景：

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

示例：动态过滤列表

<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 函数内部访问组件实例的属性和方法。