20. Vue 过滤器 - 转化时间格式

2020-03-14 本文已影响0人 Devops海洋的渔夫

需求

在上一篇中基本讲诉了Vue过滤器的基本使用，那么在后台管理系统的业务中，使用最多的一个过滤器就是时间格式的转化，下面来看看，如何处理。

构建示例

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <!--  1.导入vue.js库  -->
    <script src="lib/vue.js"></script>

</head>
<body>

<div id="app">

    <!--  定义一个时间字符串的显示  -->
    <p> 时间：{{ ctimeStr }} </p>

    <!--  使用过滤器显示时间  -->
    <p> 格式化时间：{{ ctimeStr | formatCtime }} </p>

</div>

<script>

    // 2. 创建一个Vue的实例
    var vm = new Vue({
        el: '#app',
        data: {
            ctimeStr: new Date(), // 定义显示时间
        },
        methods: {},
        filters:{ // 定义局部过滤器

            // 格式化时间
            formatCtime(dateStr){
                return dateStr
            }

        }
    });


</script>

</body>
</html>

页面显示如下：

格式化年月日

formatCtime(dateStr){
        // 格式化dateStr时间
        var dt = new Date(dateStr);

        // 获取年
        var year = dt.getFullYear();

        // 获取月
        var month = dt.getMonth() + 1; // 月份 0 - 11，需要 + 1

        // 获取日
        var day = dt.getDate();

        // 拼接 yyyy-mm-dd
        return year + '-' + month + '-' + day
}

下面来看看格式化效果，如下:

模板字符串优化字符串拼接

可以看到已经格式化好了年月日了，下一步就是格式化时分秒，但是上面有一个可以优化的地方。

return year + '-' + month + '-' + day

这里的字符串拼接可以使用模板字符串的方式进行修改，增强语义，如下：

return `${year}-${month}-${day}` // 模板字符串

设置格式化参数

在时间格式化的常见示例中：

格式化年月日 yyyy-mm-dd
格式化年月日时分秒 yyyy-mm-dd hh:mm:ss

那么上面应该要有这两个参数的传入，来控制到底需要显示为什么格式。

在过滤器中设置传入的格式化参数，如下：

格式化时分秒

上面已经完成可以格式化两种时间格式，下面来完善时分秒的格式化，如下：

        filters:{ // 定义局部过滤器

            formatCtime(dateStr, pattern = ""){
                    // 格式化dateStr时间
                    var dt = new Date(dateStr);

                    // 获取年
                    var year = dt.getFullYear();

                    // 获取月
                    var month = dt.getMonth() + 1; // 月份 0 - 11，需要 + 1

                    // 获取日
                    var day = dt.getDate();

                    // 判断格式化是 yyyy-mm-dd 还是 yyyy-mm-dd hh:mm:ss
                    if (pattern.toLowerCase() === "yyyy-mm-dd"){

                        // 拼接 yyyy-mm-dd
                        // return year + '-' + month + '-' + day
                        return `${year}-${month}-${day}` // 返回yyyy-mm-dd格式化时间

                    } else{

                        // 获取小时
                        var hours = dt.getHours();

                        // 获取分钟数
                        var minutes = dt.getMinutes();

                        // 获取秒数
                        var secounds = dt.getSeconds();

                        // 返回 yyyy-mm-dd hh:mm:ss 格式化时间
                        return `${year}-${month}-${day} ${hours}:${minutes}:${secounds}`
                    }


            }

        }

浏览器显示格式化的时间如下：