Live2d Test Env

关于使用computed替代filters的写法

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}`;
      };
    }
  },

页面显示:

以上。

posted @ 2021-05-20 17:18  致爱丽丝  阅读(447)  评论(0)    收藏  举报