0
点赞
收藏
分享

微信扫一扫

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

忍禁 2022-07-12 阅读 43

需求

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


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


可以看到月份分钟数显示为单个数字,能否补全为0107的显示效果呢?

下面使用​​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>

浏览器显示如下:


21. Vue 使用padStart补全转化时间格式_补全_02


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


21. Vue 使用padStart补全转化时间格式_字符串_03


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}`
}


}

}

浏览器显示如下:


21. Vue 使用padStart补全转化时间格式_补全_04

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


举报

相关推荐

0 条评论