filters在vue2中很是常用,用于包装元数据,但在vue3中尤大明确表示将弃用filter,推荐使用computed全面替代filter。
想要使用computed替代filter,最难思考的就是如何在computed中承载参数了
template:
<div id="app">
<div
v-for="item in list"
:key="item.id"
@click="getName(item)"
>
{{filterName(item.name,item.id)}}
</div>
<br>
</div>
data:
list: [
{
name: "hi",
id: 0
},
{
name: "hi2",
id: 1
},
{
name: "hi3",
id: 3
}
]
// 在这里,可以使用闭包函数
computed: {
filterName() {
return function(name,id) {
console.log(name,id, "这是闭包里的参数");
return `name:${name},id:${id}`;
};
}
},
页面显示:
以上。