vue过滤器

过滤器:本质上是管道函数，是函数的一种

vue中的过滤器分为两种：局部过滤器和全局过滤器

全局过滤器

// 定义一个 Vue 全局的过滤器，名字叫做msgFormat
Vue.filter('msgFormat', function(msg) {
    // 返回值
    return msg.replace(/单纯/g, 'xx');
})

// 使用
<p>{{ msg | msgFormat}}</p>

定义多个全局过滤器

Vue.filter("toTimesTwo",function(a){...}
Vue.filter("toTimesOne",function(b){...}
Vue.filter("toTimesThree",function(c){...}

有参数的全局过滤器

// 定义一个 Vue 全局的过滤器，名字叫做  msgFormat
Vue.filter('msgFormat', function(msg, arg, arg2) {
    // 返回值
    return msg.replace(/单纯/g, arg+arg2);
})

// 使用
<p>{{ msg | msgFormat('疯狂','--')}}</p>

局部过滤器

局部过滤器的有参和无参的定义和使用方法与全局的过滤器一样。唯一的区别在于局部过滤器是定义在vue的实例中，也只能在这个组件中使用。

data: {
    msg: '123'
},
methods: {},
//定义私用局部过滤器。只能在当前组件中使用
filters: {
    dataFormat(msg) {
        return msg+'xxxxx';
    }
}

1 当有局部和全局两个名称相同的过滤器时候，会以就近原则进行调用，即：局部过滤器优先于全局过滤器被调用！

 2 一个表达式可以使用多个过滤器。过滤器之间需要用管道符“|”隔开，其执行顺序从左往右：

<p>{{ money | toFixed | toRMB }}</p>