vue computed、filters 用法笔记

computed

在使用时的效果是属性，不是函数。

其次，computed 的值是“智能”响应的，依赖必须都是这个实例自己的东西，如果某个计算需要依赖传入的值，则推荐使用 methods。

filter

使用场景：当用在渲染表格的每一行时使用的，输入是后端给前端的 type 的值，输出是人可读的值（后端应该是choices，因此用我们之前的术语说，输入是 value，输出是 label）

filters: {
    levelDisplay (val) {
        return { nation: '国家级', province: '省级', prefecture: '市级' }[val]
    },
}

在模板中：

<el-tag>{{ row.type | levelDisplay }}</el-tag>

　　

或者使用 methods：

<el-tag>{{ levelDisplay(row.type) }}</el-tag>