Vueでfilterを使用して現在の時間をフォーマットする

11922 ワード

    <div id="app">
        <div>{{time|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 app=new Vue({
        el:'#app',
        data:{
            time:new Date()
        }
    })