Vue学习笔记(四)：Vue日期时间格式化

1.自定义过滤器对日期进行格式化

（1）日期时间格式，大致可以分为以下四种情况：

        ① 年月日：yyyy-M-d

        ② 年月日（小于两位数时补0）：yyyy-MM-dd

        ③ 年月日时分秒：yyyy-M-d H:m:s

        ④ 年月日时分秒（小于两位时补0）：yyyy-MM-dd HH:mm:ss

（2）针对上述的四种情况，对日期进行格式化处理：

<template>
    <div>
        <p>{{time}}</p>
        <p>[yyyy-M-d]：{{time|formatDate('yyyy-M-d')}}</p>
        <p>[yyyy-MM-dd]：{{time|formatDate('yyyy-MM-dd')}}</p>
        <p>[yyyy-M-d H:m:s]：{{time|formatDate('yyyy-M-d H:m:s')}}</p>
        <p>[yyyy-MM-dd HH:mm:ss]：{{time|formatDate('yyyy-MM-dd HH:mm:ss')}}</p>
    </div>
</template>
<script>
export default {
    name: 'TimeDemo',
    data() {
        return {
            time:new Date()
        }
    },
    filters:{
        formatDate: function(value,args) {
            var dt = new Date(value);
            if(args == 'yyyy-M-d') {// yyyy-M-d
            let year = dt.getFullYear();
            let month = dt.getMonth() + 1;
            let date = dt.getDate();
            return `${year}-${month}-${date}`;
        } else if(args == 'yyyy-M-d H:m:s'){// yyyy-M-d H:m:s
            let year = dt.getFullYear();
            let month = dt.getMonth() + 1;
            let date = dt.getDate();
            let hour = dt.getHours();
            let minute = dt.getMinutes();
            let second = dt.getSeconds();
            return `${year}-${month}-${date} ${hour}:${minute}:${second}`;
        } else if(args == 'yyyy-MM-dd') {// yyyy-MM-dd
            let year = dt.getFullYear();
            let month = (dt.getMonth() + 1).toString().padStart(2,'0');
            let date = dt.getDate().toString().padStart(2,'0');
            return `${year}-${month}-${date}`;
        } else {// yyyy-MM-dd HH:mm:ss
            let year = dt.getFullYear();
            let month = (dt.getMonth() + 1).toString().padStart(2,'0');
            let date = dt.getDate().toString().padStart(2,'0');
            let hour = dt.getHours().toString().padStart(2,'0');
            let minute = dt.getMinutes().toString().padStart(2,'0');
            let second = dt.getSeconds().toString().padStart(2,'0');
            return `${year}-${month}-${date} ${hour}:${minute}:${second}`;
        }
        }
    }
}
</script>
<style scoped>
p{
    text-align: left;
}
</style>

备注：formatDate被定义为接收两个参数的过滤器函数，其中 time 的值作为第一个参数，日期格式字符串（如：'yyyy-MM-dd'）作为第二个参数。

（3）输出结果如下

 2.将时间过滤器注册到全局

考虑到代码的复用性，可以将自定义的日期过滤器函数注册到全局。

（1）在common文件夹下新建一个filter.js文件

（2）在filter.js中定义需要使用的过滤器函数

const filter = {
    formatDate: function(value,args) {
        var dt = new Date(value);
        if(args == 'yyyy-M-d') {// yyyy-M-d
            let year = dt.getFullYear();
            let month = dt.getMonth() + 1;
            let date = dt.getDate();
            return `${year}-${month}-${date}`;
        } else if(args == 'yyyy-M-d H:m:s'){// yyyy-M-d H:m:s
            let year = dt.getFullYear();
            let month = dt.getMonth() + 1;
            let date = dt.getDate();
            let hour = dt.getHours();
            let minute = dt.getMinutes();
            let second = dt.getSeconds();
            return `${year}-${month}-${date} ${hour}:${minute}:${second}`;
        } else if(args == 'yyyy-MM-dd') {// yyyy-MM-dd
            let year = dt.getFullYear();
            let month = (dt.getMonth() + 1).toString().padStart(2,'0');
            let date = dt.getDate().toString().padStart(2,'0');
            return `${year}-${month}-${date}`;
        } else {// yyyy-MM-dd HH:mm:ss
            let year = dt.getFullYear();
            let month = (dt.getMonth() + 1).toString().padStart(2,'0');
            let date = dt.getDate().toString().padStart(2,'0');
            let hour = dt.getHours().toString().padStart(2,'0');
            let minute = dt.getMinutes().toString().padStart(2,'0');
            let second = dt.getSeconds().toString().padStart(2,'0');
            return `${year}-${month}-${date} ${hour}:${minute}:${second}`;
        }
    }
}
export default filter;

 （3）在main.js文件中引入filter.js并全局定义过滤器

import filter from './common/filter'

for (const key in filter) {
    Vue.filter(key,filter[key]);
}

这样我们就可以在项目中的任意一个文件中使用过滤器函数啦。