在Vue 3中实现筛选功能，通常涉及使用computed属性或者methods方法来对数据进行过滤。假设你有一个包含多个项目的数据列表，并希望能够根据用户输入的关键词对这些项目进行筛选，以下是一个简单的示例：
<template> <div> <input v-model="searchKeyword" type="text" placeholder="输入关键词筛选" /> <ul> <li v-for="item in filteredItems" :key="item.id">{{ item.name }}</li> </ul> </div> </template> <script> export default { data() { return { searchKeyword: '', items: [ { id: 1, name: 'Apple' }, { id: 2, name: 'Banana' }, { id: 3, name: 'Orange' }, { id: 4, name: 'Grapes' }, // 更多项目... ], }; }, computed: { filteredItems() { // 使用computed属性来根据searchKeyword对items进行筛选 return this.items.filter(item => { return item.name.toLowerCase().includes(this.searchKeyword.toLowerCase()); }); }, }, }; </script>
在上述示例中，我们有一个包含项目的数组 items，用户可以通过输入框中的 searchKeyword 来对项目进行筛选。我们使用v-model指令将输入框的值与 searchKeyword 数据属性进行双向绑定。
然后，我们使用computed属性 filteredItems 来根据 searchKeyword 对 items 数组进行筛选。在computed属性中，我们使用 filter() 方法来遍历 items 数组，只保留那些 name 属性中包含 searchKeyword 的项目，不区分大小写。
在模板中，我们使用 v-for 指令来遍历 filteredItems 数组，并渲染匹配的项目。
这样，当用户在输入框中输入关键词时，列表中的项目将根据输入的关键词进行实时筛选显示。
