vue筛选按钮

可以通过在 Vue 中使用 computed 计算属性来实现筛选按钮的功能。首先，你可以在 data 中定义一个数组，用来存储筛选结果。然后，在 computed 中定义一个方法，该方法可以根据不同的条件对数据进行筛选，最后返回筛选结果。最后，将筛选结果渲染到页面上显示。

以下是一个简单的例子：

<template>
  <div>
    <button @click="filterByMale">男性</button>
    <button @click="filterByFemale">女性</button>
    <ul>
      <li v-for="person in filteredPersons" :key="person.id">
        {{ person.name }}
      </li>
    </ul>
  </div>
</template>

<script>
export default {
  data() {
    return {
      persons: [
        { id: 1, name: '张三', gender: 'male' },
        { id: 2, name: '李四', gender: 'male' },
        { id: 3, name: '王五', gender: 'female' },
        { id: 4, name: '赵六', gender: 'male' },
        { id: 5, name: '钱七', gender: 'female' },
      ],
      filteredPersons: [],
    };
  },
  computed: {
    filteredMalePersons() {
      return this.persons.filter((person) => person.gender === 'male');
    },
    filteredFemalePersons() {
      return this.persons.filter((person) => person.gender === 'female');
    },
  },
  methods: {
    filterByMale() {
      this.filteredPersons = this.filteredMalePersons;
    },
    filterByFemale() {
      this.filteredPersons = this.filteredFemalePersons;
    },
  },
};
</script>

在上面的例子中，我们定义了一个数组 persons，存储了一些人员信息。定义了一个 computed 属性 filteredMalePersons 和 filteredFemalePersons，分别根据性别筛选出男性和女性。在 methods 中，我们定义了两个方法 filterByMale 和 filterByFemale，用来设置 filteredPersons 的值，从而实现筛选按钮的功能。最后，在页面上，我们使用 v-for 指令渲染 filteredPersons 中的数据。