Vue管道

作者: 念_ae7b | 来源:发表于2018-11-01 17:27 被阅读0次

在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