1.全局过滤器
Vue.filter('myFilter',function (value){
// return '你好 世界';
return value.replace('hello','HELLO');
});
<!-- | 管道符-->
<p>{{msg | myFilter}}</p>
<p :title="msg | myFilter">{{msg | myFilter}}</p>
<p>{{'一二三四五' | myFilter}}</p>
2.私有过滤器
let vm = new Vue({
el: "#app",
data: {
msg:"hello word",
msg2:"hello world2",
},
methods: {
myFilter5(value){
return value+"你猜猜我是谁myFilter5?"
}
},
filters:{
myFilter2:function (value){
//设置大写
return value.toUpperCase();
},
myFilter3(value,arg1,arg2){
return value+arg1+arg2;
},
/*私有过滤器和全局过滤器重名的时候,私有过滤器生效!!!!*/
myFilter4(value){
return value+'你猜猜我是谁?myFilter4';
}
}
});
<p>{{msg2|myFilter2}}</p>
过滤器函数参数超过一个时,需要额外给其他的参数传值,但是首个参数依然无需传值
<p>{{msg2|myFilter3('你好','世界')}}</p>
多个过滤器存在时会按照从左至右的顺序依次执行,myFilter4的value是myFilter过滤器的结果
<p>{{msg|myFilter|myFilter4}}</p>
<p>{{msg|myFilter4|myFilter}}</p>
自定义函数也能够实现和过滤器相同的效果,但是过滤器功能更强大,针对性也更强,对内容的过滤操作推荐使用过滤器来完成
<p>{{myFilter5(msg)}}</p>
<p>{{msg|myFilter4}}</p>