在vue.js中可以自定义过滤器用于一些常见的文本格式化,过滤器可以用在胡子语法和v-bind表达式,过滤器是javascript 函数,由管道符号 |表示
- 在template 中的使用
<!-- 在双花括号中 -->
{{ message | capitalize }}
> message 作为 capitalize过滤器的第一个参数
<!-- 在 `v-bind` 中 -->
<div v-bind:id="rawId | formatId"></div>
- 局部过滤器 ( 在组件内部定义 )
export default {
filters:{
capitalize: function (value) {
if (!value) return ''
value = value.toString()
return value.charAt(0).toUpperCase() + value.slice(1)
}
}
}
- 全局过滤器 ( 在main.js中定义 )
Vue.filter(' capitalize ', function(val){
if (!value) return ''
value = value.toString()
return value.charAt(0).toUpperCase() + value.slice(1)
})
new Vue{ ( ... ) }
如果全局的过滤器与局部的过滤器重名了,有限使用局部的过滤器
- 过滤器也可以串联:
{{ message | filterA | filterB }}
message作为过滤器filterA的第一个参数传入,出来过后得到的结果作为filterB 的第一个参数传入,得到最终的结果
- 过滤器是javascript 函数,可以接受参数
{{ message | filterA( 'arg1', 'arg2' ) }}
这里表示filterA可以接受三个参数, message 是第一个,arge1 第二个 , arge2 第三个
