一、什么是过滤器?
- 用于文本格式化(本质是一个函数)
- 用于双括号插值和v-bind表达式,用管道符
'|'
添加到表达式尾部
- 双括号插值:
{{ message | capitalize}}
- v-bind表达式:
<div v-bind:id='rawid | formatid></div>'
二、注册过滤器
- 注册全局过滤器
Vue.filter('filtername',function(value){...})
<div id="demo1">
<input type="text" v-model='message'>
<br>
{{message | myfile}}
</div>
<script>
// 定义全局过滤器
Vue.filter('myfile',function(value){
if(!value) return ''
value=value.toString(); //把value值转换为字符串
return value.toUpperCase() //转换为大写
})
new Vue({
el:'#demo1',
data:{
message:'abc'
}
})
</script>
- 注册局部过滤器
在Vue的filters属性内注册
<div id="demo2">
<input type="text" v-model='message'>
<br>
{{message | myfile}}
</div>
<script>
// 定义局部过滤器
new Vue({
el:'#demo2',
data:{
message:'abc'
},
filters:{
myfile:function(value){
if(!value) return ''
value=value.toString(); //把value值转换为字符串
return value.toUpperCase() //转换为大写
}
}
})
</script>
需要注意:全局注册是filter,而组件过滤器是filters,如果不加s,并不会报错,但是没有过滤器的效果
- 过滤器串联
-
{{message | filterA | filterB}}
message作为参数传递给filterA,filterA的返回值再作为参数传给filterB,最终的结果是filterB返回的 -
{{message | filterA('arg1','arg2')}}
一个过滤器接收多个参数(message,arg1,arg2) -
{{'a','b' | filterB}}
a和b同时作为参数传递给fliterB
注意:
-
当有局部和全局两个名称相同的过滤器时候,会以就近原则进行调用,即:局部过滤器优先于全局过滤器被调用!
-
一个表达式可以使用多个过滤器,过滤器之间需要用管道符“|”隔开。其执行顺序,从左往右