Vue管道

2018-11-01  本文已影响0人  念_ae7b

在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.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

上一篇 下一篇

猜你喜欢

热点阅读