Vue:使用 过滤器 进行 日期格式化

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

    <script src=" https://cdn.jsdelivr.net/npm/vue/dist/vue.js "></script>
    <script>
        // Vue.filter('format', function(value, arg) {
        //     // 处理日期格式
        //     if (arg == 'yyyy-mm-dd') {
        //         var ret = '';
        //         ret += value.getFullYear() + '-' + (value.getMonth() + 1) + '-' + value.getDate();
        //     }
        //     return ret;
        // });
        Vue.filter('formatDate', 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: {
                date: new Date(),
            }
        });
    </script>
</body>

结果演示:
在这里插入图片描述

你可能感兴趣的:(vue)