Vue过滤器

过滤器

Vue提供了一系列的固定逻辑来使程序员更加容易的实现这列功能，这些过滤器成为系统过滤器，但是在Vue2.x之后就没有了，但是Vue也提供了一个接口用来定义自己特殊的逻辑，这就是自定义过滤器

由于vue2.x没有了系统过滤器，那么就直接看自定义过滤器

自定义过滤器

自定义私有过滤器

过滤器的使用形式是前面放参数，然后使用管道符(|)隔开，然后在写过滤器的名字，如果有其他的参数，在后面跟上括号，写上参数即可

{{ time | datefmt }}


new Vue({
    el: '#app',
    data: {
        time: new Date(),
    },
    // 在某个vue对象内部定义的过滤器成为私有过滤器，这种过滤器只有在当前vue对象el指定的的监管区域有用
    filters: {
        // input是自定义的过滤器的默认参数，就是"|"左边的值，即这里的time
        datefmt: function(input){
            let year = input.getFullYear();
            let month = input.getMonth() + 1;
            let day = input.getDate();
            return year + "-" + month + "-" + day;    
        }
    }
});

自定义全局过滤器

私有过滤器只能在自己的vue对象内起作用，那么如何定义一个过滤器能够在全局起作用呢？

new filter('datefmt', function(input){
    let year = input.getFullYear();
    let month = input.getMonth();
    let day = input.getDate();
    return year + "-" + month + "-" + day;
});

这样定义后就可以在所有的vue对象使用过滤器了