vue格式化时间

朴灿烈づ我的快乐病毒、 2021-09-09 02:00 505阅读 0赞

# 效果图 #

![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L2Z1OTgzNTMxNTg4_size_16_color_FFFFFF_t_70_pic_center]  
**简单实用，不需要下载插件，在项目中也可以这样用**

<!DOCTYPE html>
    <html lang="en">
    <head>
        <meta charset="UTF-8">
        <title>格式化时间</title>
        <style>
            #app{ 
                font-weight: bold;
                font-size: 20px;
            }
        </style>
    </head>
    <body>
        <div id="app">
            <div>{ { timeOne}} ----> { { timeOne | format}}</div> 
            <div>{ { timeTwo}} ----> { { timeTwo | format('MM-DD')}}</div>
            <div>{ { timeTwo}} ----> { { timeTwo | format('MM月DD日')}}</div>
            <div>{ { timeTwo}} ----> { { timeTwo | format('YYYY/MM/DD')}}</div>
            <div>{ { timeOne}} ----> { { timeTwo | format('YYYY-MM-DD')}}</div>
            <div>{ { timeTwo}} ----> { { timeTwo | format('YYYY/MM/DD HH:mm:ss 星期w')}}</div>
            <div>{ { timeTwo}} ----> { { timeTwo | format('YYYY-MM-DD 星期w')}}</div>
            <div>{ { timeOne}} ----> { { timeTwo | format('YYYY年MM月DD日 星期w')}}</div>
            <div>时间戳：{ { timeThree}} ----> { { timeThree | format('YYYY')}}</div>
            <div>时间戳：{ { timeThree}} ----> { { timeThree | format('YYYY-MM')}}</div>
            <div>时间戳：{ { timeThree}} ----> { { timeThree | format('YYYY-MM-DD HH:mm')}}</div>
            <div>时间戳：{ { timeThree}} ----> { { timeThree | format('YYYY年MM月DD日')}}</div>
            <div>时间戳：{ { timeThree}} ----> { { timeThree | format('YYYY年MM月DD日 星期w')}}</div>
            <div>时间戳：{ { timeThree}} ----> { { timeThree | format('YYYY年MM月DD日 HH时mm分')}}</div>
        </div>
    </body>
    </html>
    <script src="vue.js"></script>
    <script>
        new Vue({ 
            el: '#app',
            data: { 
                timeOne: '2021/07/17 14:20:00',
                timeTwo: '2021-07-17 14:20:50',
                timeThree: 1626500149311 // 时间戳必须是数字类型
            },
            filters: { 
                /** *格式化时间文本 * @param {Date} time 时间 * @param {String} format 文本格式 * Y 表示年份 * M 表示月份 * D 表示某日 * h 表示小时 * m 表示分 * s 表示秒 * w 表示星期几 */
                format(time, format = 'YYYY-MM-DD HH:mm:ss') { 
                    let date = new Date(time)
                    let o = { 
                        'M+': date.getMonth() + 1,
                        'D+': date.getDate(),
                        'H+': date.getHours(),
                        'm+': date.getMinutes(),
                        's+': date.getSeconds(),
                        'w': '日一二三四五六'.charAt(date.getDay())
                    };
    
                    format = format.replace(/Y{4}/, date.getFullYear()).replace(/Y{2}/, date.getFullYear().toString().substring(2));
    
                    let k, reg
                    for (k in o) { 
                        reg = new RegExp(k);
                        /* eslint no-use-before-define:0 */
                        format = format.replace(reg, match);
                    }
                    function match(m) { 
                        return m.length === 1 ? o[k] : ('00' + o[k]).substr(('' + o[k]).length);
                    }
    
                    return format;
                }
            }
        })
    </script>

[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L2Z1OTgzNTMxNTg4_size_16_color_FFFFFF_t_70_pic_center]: /images/20210813/1762eb0056d545ba8d813d4c8ac4a7cb.png