Javascript - Vue - 过滤器

过滤器

输出的数据由vue对象提供，但它的数据可能需要做进一步的处理才适合展示给用户看，为此，可以在静态的Vue上定义一个过滤器对实例vue对象的data数据进行过滤处理。

//调用过滤器
//msg是返回数据的变量
//format是指定的过滤器，这个过滤器定义在Vue上
<p>{{ msg | format }}</p>

//在静态Vue上定义过滤器，data是原来的msg
Vue.filter('format', function (data) {
    return data.replace(new RegExp('x','gm'),'a');
});

向过滤器传参

<p>{{msg | format('hello') }}</p>

Vue.filter('format', function (data,arg) {
    return data.replace(new RegExp('x', 'gm'), arg);
});

可以链式调用过滤器，第一过滤器处理完成后会自动调用后面的处理器

<p>{{msg | format | format2 | format3 }}</p>

私有过滤器

可以在vue实例中定义私有的过滤器，但如果同时静态vue也存在同名的过滤器，则使用就近原则（优先使用vue实例定义的过滤器）

<div id="app">
    {{msg | filter1}}
</div>

var vueObj = new Vue({
    el: "#app",
    data: {
        msg:"xxx"
    },
    filters: {
        filter1: function (data) {
            return data.replace(new RegExp("x", "gm"), "a");
        }
    }
});

Javascript - 学习总目录