Vue允许自定义过滤器,用作一些常见的文本格式化,过滤器只用在两个地方:mustache插值和v-bind表达式
全局过滤器
Vue.filter ( ' 过滤器名字 ' ,回调函数 )
<body>
<div id="app">
原msg字符串:{{ msg }} <br>
过滤后的msg:{{ msg | msgFormat }} <!--通过管道符 | 来使用过滤器,若要传参,msgFormat(arg),参数可传多个-->
</div>
<script>
//定义一个Vue的全局过滤器,名字叫做msgFormat
//回调函数的第一个参数是管道符前面传递的数据,若上面有参数传来,接收即可,function(data,arg)
Vue.filter('msgFormat',function (data) {
return data.replace(/*/g,'')
})
var vm = new Vue({
el: '#app',
data: {
msg:'*H*e*l*l*o*'
}
})
</script>
</body>
全局过滤器可被所有的vm实例使用
可对同一数据同时使用多个过滤器,依样画葫芦
私有过滤器
在创建vm对象时使用filters属性可为这个实例对象建立私有过滤器
<body>
<div id="app">
{{ msg | msgFormat }}
</div>
<script>
var vm = new Vue({
el: '#app',
data: {
msg:'*H*e*l*l*o*'
},
filters:{
//定义私有过滤器,过滤器名称:处理函数
msgFormat:function (data) {
return data.replace(/*/g,'')
}
}
})
</script>
</body>
过滤器采用就近原则,如果私有过滤器和全局过滤器重名则优先使用自身的私有过滤器