需求
在时间格式化的过滤字符串中，如果没有补全字符串的内容，可能显示如下：
可以看到月份和分钟数显示为单个数字，能否补全为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}`
}
}
}
浏览器显示如下：
