vue中filter()方法

在Vue中，filter()方法用于对数据进行过滤操作。它可以接收一个函数作为参数，该函数将应用于数组的每个元素，返回一个新的数组。

下面是一个例子：

// 定义一个数组
let numbers = [1, 2, 3, 4, 5];

// 定义一个函数，将数组中的每个元素乘以2
function double(value) {
  return value * 2;
}

// 使用filter()方法将数组中的每个元素乘以2
let doubledNumbers = numbers.filter(double);
console.log(doubledNumbers); // [2, 4, 6, 8, 10]

在Vue中，filter()方法可以用来对列表数据进行过滤、排序等操作，从而实现数据的动态渲染和展示。在Vue的模板中，可以使用过滤器来调用filter()方法，如下所示：

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

<script>
export default {
  data() {
    return {
      items: [
        { id: 1, name: 'apple' },
        { id: 2, name: 'banana' },
        { id: 3, name: 'orange' },
        { id: 4, name: 'pear' },
      ],
      searchText: '',
    };
  },
  computed: {
    filteredItems() {
      return this.items.filter(item => item.name.includes(this.searchText));
    },
  },
};
</script>

在上面的例子中，我们定义了一个items数组和一个searchText变量，用于存储用户输入的搜索关键字。使用computed属性，我们定义了一个filteredItems计算属性，它使用filter()方法对items进行了过滤操作，只返回包含搜索关键字的数据项。在模板中，我们使用v-for指令遍历filteredItems数组，并渲染每个数据项的名称。