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()
    },
});

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