8. 过滤器的作用, 如何实现一个过滤器？

根据过滤器的名称, 过滤器是用来过滤数据的, 在 Vue 中使用 filters 来过滤数据, filters 不会修改数据, 而是过滤数据, 改变用户看到的输出(计算属性 computed, 方法 methods 都是通过修改数据来处理数据格式的输出显示)。

使用场景：

• 需要格式化数据的情况, 比如需要处理时间、价格等数据格式的输出 / 显示。
• 比如后端返回一个年月日的日期字符串, 前端需要展示为多少天前的数据格式, 此时就可以用 fliters 过滤器来处理数据。

过滤器是一个函数, 它会把表达式中的值始终当作函数的第一个参数。过滤器用在插值表达式 {{ }} 和 v-bind 表达式中, 然后放在操作符 | 后面进行指示。

例如, 在显示金额, 给商品价格添加单位:

商品价格：{{item.price | filterPrice}}

filters: {
    filterPrice (price) {
      return price ? ('￥' + price) : '--'
    }
}
1
2
3
4
5
6
7