vue3实现筛选

在Vue3中实现筛选功能和Vue2类似，但是由于语法和API有所变化，需要注意一些细节。

首先，你需要在Vue组件中定义一个数据列表和一个选中的类别变量，例如：

import { ref } from 'vue'

export default {
  setup() {
    const items = ref([
      { name: 'Apple', category: 'Fruit' },
      { name: 'Banana', category: 'Fruit' },
      { name: 'Carrot', category: 'Vegetable' },
      { name: 'Tomato', category: 'Vegetable' },
    ])
  
    const selectedCategory = ref('')
    
    return {
      items,
      selectedCategory
    }
  }
}

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

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

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

import { computed } from 'vue'

export default {
  setup(props, { reactive }) {
    const items = reactive([
      { name: 'Apple', category: 'Fruit' },
      { name: 'Banana', category: 'Fruit' },
      { name: 'Carrot', category: 'Vegetable' },
      { name: 'Tomato', category: 'Vegetable' },
    ])
  
    const selectedCategory = ref('')
    
    const filteredItems = computed(() => {
      if (selectedCategory.value === '') {
        return items
      } else {
        return items.filter(item => item.category === selectedCategory.value)
      }
    })
    
    return {
      items,
      selectedCategory,
      filteredItems
    }
  }
}

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

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

这样，当你选择一个类别时，列表将自动更新以显示符合条件的项目。需要注意的是，在Vue3中，你需要通过ref或reactive将数据对象变成响应式的对象。