Vue学习笔记之过滤器 filter

前言

Vue的过滤器，了解一下？

过滤器，顾名思义，字面意思就是将一种数据经过加工过滤成另外一种数据。

常见的业务场景就是对一些常见的文本格式化。

学习文档快速入口

正文

过滤器的用处

过滤器可以用在两个地方: 双花括号插值 和 v-bind表达式。

{{ time |  formatDate }}

由上面示例代码应该不难看出，在使用过滤器的时候，语法规则：需过滤的文本 加上 “管道”符号（｜） 然后加上过滤器，即 文本 ｜ 过滤器。

过滤器的定义

在Vue中常见的过滤器分为2种：局部过滤器和全局过滤器。

全局过滤器

全局过滤器即在创建Vue实例时全局定义过滤器。

示例代码：

Vue.filter('capitalize', function (value) {
  if (!value) return ''
  value = value.toString()
  return value.charAt(0).toUpperCase() + value.slice(1)
})

局部过滤器

示例代码：

filters: {
  capitalize: function (value) {
    if (!value) return ''
    value = value.toString()
    return value.charAt(0).toUpperCase() + value.slice(1)
  }
}

小结

由上面过滤器的定义不难看出，过滤器filters其实是一个默认只有一个参数的function。如果我们想定义一个多个参数的写法如下：

filters: {
  formatData: function (value, arg1, arg2) {
    if (!value) return ''
    return arg1 + value + arg2
  }
}

两种多参数过滤器的使用语法，效果相同，都是调用上面定义的formatData过滤器，如下:

{{ nickname ｜ formatData('上午好，欢迎','加入Vue学习之旅') }}


 {{ nickname, '上午好，欢迎', '加入Vue学习之旅'｜ formatData }} 

使用注意

1. 当局部过滤器和全局过滤器重名时，局部过滤器的优先级高，所以会采用局部过滤器；
2. 一个表达式可以使用多个过滤器。过滤器之间可以使用管道符号“｜”隔开。它的执行顺序是从左到右。