在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