列表过滤的两种实现方式(watch和computed)
2023-02-22 本文已影响0人
扶得一人醉如苏沐晨
方式一
watch方式实现
data中
// 后端返回的数据总和
tatalList: [],
// 前端过滤之后的list
showList: [],
watch中
watch: {
keyWord: {
// 这个是关键,初始化的时候立即触发
// 保证showList为totalList
immediate: true,
handler(val) {
this.showList = this.totalList.filter(
(item) => item.name.indexOf(val) !== -1
);
},
},
},
方式二 computed实现
// 计算属性数据过滤
computed: {
showList() {
return this.totalList.filter(
(item) => item.name.indexOf(this.keyWord) !== -1
);
},
},