Vue中管道的使用

在Vue2.x版本中，filter需要自己定义才能够使用
过滤器可以用在两个地方：

• 双花括号插值，如：{{ message | capitalize }}
• v-bind表达式（从2.1.0+版本支持），如：<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实例之前全局定义：

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

new Vue({
  // ...
})

函数中的value既是message的值

Vue中的过滤器可以串联

{{ message | filterA | filterB}}

过滤器的执行顺序是从左到右，左边返回的值是下一个过滤器中的value