Vue框架——过滤器

过滤器的作用

格式化数据，比如将字符串格式化首字母大写，将日期格式化为指定格式等

自定义过滤器

使用filterAPI

Vue.filter('过滤器名称', function(val){
    // 过滤器业务逻辑
});

第一个参数为过滤器的名称，第二个参数为一个函数，用来处理过滤器的业务逻辑，函数里的参数为需要处理的数据

局部过滤器

filters:{
    '过滤器名称':function(val){
        //过滤器业务逻辑
    }
}

过滤器的使用

<div id="app">
    <div>{{msg}}</div>
    <div>{{msg | toUpper}}</div>
    <div>{{msg | toUpper | toLower}}</div>
    <div :str="msg | toUpper"></div>
</div>

Vue.filter('toUpper', function(val) {
    return val.charAt(0).toUpperCase() + val.slice(1);
});
Vue.filter('toLower', function(val) {
    return val.charAt(0).toLowerCase() + val.slice(1);
});
var vm = new Vue({
    el: '#app',
    data: {
        msg: 'hey'
    },
});

过滤器可以同时使用多个，作用是把前一个过滤器处理的结果作为下一个过滤器的参数，再进行处理

带参数的过滤器案例

时间格式化

<div id="app">
    <div>{{date | format('yyyy-MM-dd hh:mm:ss')}}</div>
</div>

Vue.filter('format', function(value, arg) {
    function dateFormat(date, format) {
        if (typeof date === "string") {
            var mts = date.match(/(\/Date\((\d+)\)\/)/);
            if (mts && mts.length >= 3) {
                date = parseInt(mts[2]);
            }
        }
        date = new Date(date);
        if (!date || date.toUTCString() == "Invalid Date") {
            return "";
        }
        var map = {
            "M": date.getMonth() + 1, //月份 
            "d": date.getDate(), //日 
            "h": date.getHours(), //小时 
            "m": date.getMinutes(), //分 
            "s": date.getSeconds(), //秒 
            "q": Math.floor((date.getMonth() + 3) / 3), //季度 
            "S": date.getMilliseconds() //毫秒 
        };
        format = format.replace(/([yMdhmsqS])+/g, function(all, t) {
            var v = map[t];
            if (v !== undefined) {
                if (all.length > 1) {
                    v = '0' + v;
                    v = v.substr(v.length - 2);
                }
                return v;
            } else if (t === 'y') {
                return (date.getFullYear() + '').substr(4 - all.length);
            }
            return all;
        });
        return format;
    }
    return dateFormat(value, arg);
});
var vm = new Vue({
    el: '#app',
    data: {
        date: new Date()
    },
});

过滤器函数带有两个参数，第一个是需要处理数据的值，第二个是时间的格式