17. Vue 使用padStart补全转化时间格式

小半 • 2022年9月26日下午8:33 • 前端开发 • 阅读 174

需求

在时间格式化的过滤字符串中，如果没有补全字符串的内容，可能显示如下：

可以看到「月份」和「分钟数」显示为单个数字，能否补全为「01」和「07」的显示效果呢？

下面使用padStart()方法来处理一下。

pagStart() 和 padEnd 使用说明

❝

使用ES6中的字符串新方法 String.prototype.padStart(maxLength, fillString=”) 或 String.prototype.padEnd(maxLength, fillString=”)来填充字符串；

❞

参数说明：

maxLength 填充后的字符串长度
fillString 使用填充的字符串

示例

<!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> 字符串：{{ num }} </p>

    <!--  使用padStart补全字符串  -->
    <p> padStart：{{ num | strPadStart('0') }} </p>

    <!--  使用padEnd补全字符串  -->
    <p> padEnd：{{ num | strPadEnd('0') }} </p>

</div>

<script>

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

            strPadStart(value, pattern = ""){ // 使用padStart补全字符串
                return value.toString().padStart(4,pattern)
            },

            strPadEnd(value, pattern = ""){ // 使用padEnd补全字符串
                return value.toString().padEnd(4,pattern)
            }

        }
    });



</script>

</body>
</html>

浏览器显示如下：

下面来完善一下前面时间格式化的过滤器

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

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

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

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

                    // 获取日
                    var day = (dt.getDate()).toString().padStart(2,'0');

                    // 判断格式化是 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()).toString().padStart(2,'0');

                        // 获取分钟数
                        var minutes = (dt.getMinutes()).toString().padStart(2,'0');

                        // 获取秒数
                        var secounds = (dt.getSeconds()).toString().padStart(2,'0');

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


            }

        }