使用vue过滤器

首先得知道过滤器是干嘛用的。比如说自来水从水厂到家，肯定是经过了多重的过滤才能被使用。那么vue过滤器也是如此。

用一张图来生动表示一下

过滤器的使用方法

<!-- 在双花括号中 -->
{{ message | capitalize }}

<!-- 在 `v-bind` 中 -->
<div v-bind:id="rawId | formatId"></div>

过滤器的定义

//组件的选项中定义
filters: {
  capitalize: function (value) {
    if (!value) return ''
    value = value.toString()
    return value.charAt(0).toUpperCase() + value.slice(1)
  }
}

//在组件之外定义
Vue.filter('capitalize', function (value) {
  //如果value为空，就返回一个空字符串
  if (!value) return ''
  //将value转为字符串，以方便使用下面的字符串的API
  value = value.toString()
  //将首字母大写
  return value.charAt(0).toUpperCase() + value.slice(1)
})

new Vue({
  // ...
})

过滤器串联使用

在上面总共定义了两种使用方式：在插值中和v-bind。还有两种定义方式：组件内和组件外。

但是还有一个中的特性即串联：即message传入filterA中，处理完后结果在返回给filterB。所以最后结果就是B返回的结果

{{ message | filterA | filterB }}

又因为过滤器是一个函数，故可以接受参数：filterA看似只有两个参数，但是实际上会接收三个，顺序为：message>arg1>arg2

{{ message | filterA('arg1', arg2) }}