Vue过滤器 filter

这是什么？

filter过滤器，顾名思义就是一个数据经过了这个过滤之后产出另外一个东西。就比如一个时间戳经过过滤之后给我产出一个（2020-09-14 15:54:54）这种格式的数据

怎么定义？方法有二

注意：全局注册时是filter，组件内部是filters。filter跟filters用错虽然不会报错，但是不会去过滤数据

1.组件内

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

2.全局定义

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

怎么使用？

1.双花括号插值

2.v-bind表达式中

<!-- 在双花括号中 -->
{{ message | capitalize }}
 
<!-- 在 `v-bind` 中 -->
<div v-bind:id="rawId | formatId"></div>