在Vue中实现列表筛选功能有多种方法,以下是其中一种常见的做法:
1. 创建一个Vue组件,用于显示列表和处理筛选逻辑。
<template><div>
<input v-model="filterText" placeholder="输入关键字筛选">
<ul>
<li v-for="item in filteredList" :key="item.id">{{ item.name }}</li>
</ul>
</div>
</template>
<script>
export default {
data() {
return {
filterText: '',
list: [
{ id: 1, name: 'Item 1' },
{ id: 2, name: 'Item 2' },
{ id: 3, name: 'Item 3' },
],
};
},
computed: {
filteredList() {
return this.list.filter(item => {
return item.name.includes(this.filterText);
});
},
},
};
</script>
在上面的示例中,我们使用了一个输入框(<input>)来获取用户的筛选关键字,并使用v-model指令将输入框的值绑定到filterText数据属性上。
在computed计算属性中,我们使用filter()方法来过滤列表项,只显示包含筛选关键字的项。
最后,在模板中使用v-for指令遍历filteredList,并通过:key绑定每个列表项的唯一标识符。
你可以根据需要自定义样式、添加更多筛选条件或使用其他方法来实现列表筛选功能。