vue过滤器

用法

Vue过滤器可以用于两个地方: 双括号插值和v-bind表达式.

1
2
3
{{message | capitalize}}

<div v-bind:id="rawId | formatId"></div>

可以在component的options中定义本地的过滤器

1
2
3
4
5
6
7
filters: {
capitalize(value) {
if (!value) return ''
value = value.toString()
return value.charAt(0).toUpperCase + value.slice(1)
}
}

或者在创建Vue实例之前全局定义过滤器

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

过滤器函数总接收表达式的值,作为第一个参数。过滤器可以串联

1
{{message | filterA | filterB}}