过滤器（filter）是输送介质管道上不可缺少的一种装置，通常安装在减压阀、泄压阀、定水位阀 ，方工过滤器其它设备的进口端设备。

——百度百科《过滤器》

这是百度百科的介绍，正巧Vue中过滤器的使用就是通过管道符号|，不知道是有意设计还是巧合

闲话少说，开始主题

什么是过滤器

过滤器用于改变渲染结果

现在的过滤器经过一番修改只能作用于插值表达式的数据渲染了

来看一下官网的示例

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

这个过滤器的功能是获取字符串的第一个字符转换为大写，通过{{message | capitalize}}使用过滤器

为什么要用过滤器

当有些数据需要需要渲染出来才能看得懂（比如时间戳）时，使用过滤器可以获得更好的展示效果

怎么使用过滤器

过滤器有两种类型，一种是局部过滤器，定义在组件中，可以在单个组件中使用；另一种是全局过滤器，在创建Vue实例之前定义，可以在任何组件中使用。当全局过滤器和局部过滤器重名时，会采用局部过滤器

使用时间戳过滤器来做示例，在main.js中添加如下代码

// 全局挂载过滤器
Vue.filter('formatDate', function (date) {
  const n = new Date(date)
  return n.getFullYear() + '-' + (n.getMonth() + 1) + '-' + n.getDate()
    + ' ' + n.getHours() + ':' + n.getMinutes() + ':' + n.getSeconds()
})

然后在某一个需要转换时间戳的组件中使用

.info
  .time
    i.el-icon-time  {{article.createAt | formatDate}}

然后可以看到页面中的渲染效果如下

image-20200915194723632

还是这个过滤的局部定义方法为

filter: {
  formatDate: function(date) {
    const n = new Date(date)
    return n.getFullYear() + '-' + (n.getMonth() + 1) + '-' + n.getDate()
      + ' ' + n.getHours() + ':' + n.getMinutes() + ':' + n.getSeconds()
  }
}

过滤器可以串联使用

{{message | filter1 | filter2}}
// 将filter1渲染结果作为filter2的参数
赏

前端小白