Vue管道

在Vue2.x版本中,filter需要自己定义才能够使用

过滤器可以用在两个地方:

双花括号插值,如:{{ message | capitalize }}
v-bind表达式(从2.1.0+版本支持),如:

自定义的方式有两种:

  • 在组件的选项中定义本地的过滤器:
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

你可能感兴趣的:(Vue管道)