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

<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>