在Vue中的for循环中时的筛选器列表

在Vue中，v-for 指令用于基于一个数组来渲染一个列表。然而，Vue 2.x 中的过滤器（filters）功能已经在 Vue 3.x 中被移除。如果你正在使用 Vue 3.x，你应该使用计算属性（computed properties）或者方法（methods）来实现筛选逻辑。

基础概念

v-for: 用于基于源数据多次渲染元素或模板块。
计算属性: 是一种依赖于其他数据变化而变化的属性，可以用来处理复杂的逻辑并返回一个值。
方法: 是可以在模板中调用的函数，通常用于执行一些操作。

类型

计算属性: 适用于当依赖的数据变化时，需要重新计算的场景。
方法: 适用于每次调用都需要执行相同操作的场景。

应用场景

当你需要在列表渲染前对数据进行筛选时，可以使用计算属性或方法。

示例代码

假设我们有一个用户列表，我们想要显示年龄大于18岁的用户。

使用计算属性

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

<script>
export default {
  data() {
    return {
      users: [
        { id: 1, name: 'Alice', age: 20 },
        { id: 2, name: 'Bob', age: 17 },
        { id: 3, name: 'Charlie', age: 25 }
      ]
    };
  },
  computed: {
    filteredUsers() {
      return this.users.filter(user => user.age > 18);
    }
  }
};
</script>

使用方法

<template>
  <div>
    <ul>
      <li v-for="user in filterUsers()" :key="user.id">
        {{ user.name }} - {{ user.age }}
      </li>
    </ul>
  </div>
</template>

<script>
export default {
  data() {
    return {
      users: [
        { id: 1, name: 'Alice', age: 20 },
        { id: 2, name: 'Bob', age: 17 },
        { id: 3, name: 'Charlie', age: 25 }
      ]
    };
  },
  methods: {
    filterUsers() {
      return this.users.filter(user => user.age > 18);
    }
  }
};
</script>