vue如何实现列表筛选功能

在Vue中实现列表筛选功能有多种方法，以下是其中一种常见的做法：

1. 创建一个Vue组件，用于显示列表和处理筛选逻辑。

<template>
<div>
<inputv-model="filterText"placeholder="输入关键字筛选">
<ul>
<liv-for="iteminfilteredList":key="item.id">{{item.name}}</li>
</ul>
</div>
</template>
<script>
exportdefault{
data(){
return{
filterText:'',
list:[
{id:1,name:'Item1'},
{id:2,name:'Item2'},
{id:3,name:'Item3'},
],
};
},
computed:{
filteredList(){
returnthis.list.filter(item=>{
returnitem.name.includes(this.filterText);
});
},
},
};
</script>

在上面的示例中，我们使用了一个输入框（<input>）来获取用户的筛选关键字，并使用v-model指令将输入框的值绑定到filterText数据属性上。

在computed计算属性中，我们使用filter()方法来过滤列表项，只显示包含筛选关键字的项。

最后，在模板中使用v-for指令遍历filteredList，并通过:key绑定每个列表项的唯一标识符。

你可以根据需要自定义样式、添加更多筛选条件或使用其他方法来实现列表筛选功能。