vue实现筛选

要实现筛选功能，你可以使用Vue的计算属性（computed）和v-model指令来实现。

首先，你需要在Vue组件中定义一个数据列表，例如：

data() {
  return {
    items: [
      { name: 'Apple', category: 'Fruit' },
      { name: 'Banana', category: 'Fruit' },
      { name: 'Carrot', category: 'Vegetable' },
      { name: 'Tomato', category: 'Vegetable' },
    ],
    selectedCategory: ''
  }
}

然后，在模板中使用v-model指令绑定selectedCategory变量，例如：

<select v-model="selectedCategory">
  <option value="">All</option>
  <option value="Fruit">Fruit</option>
  <option value="Vegetable">Vegetable</option>
</select>

接下来，你可以创建一个计算属性（computed）来实现筛选功能，例如：

computed: {
  filteredItems() {
    if (this.selectedCategory === '') {
      return this.items
    } else {
      return this.items.filter(item => item.category === this.selectedCategory)
    }
  }
}

最后，在模板中使用v-for指令遍历filteredItems计算属性，例如：

<ul>
  <li v-for="item in filteredItems" :key="item.name">
    {{ item.name }} ({{ item.category }})
  </li>
</ul>

这样，当你选择一个类别时，列表将自动更新以显示符合条件的项目。