在Vue.js中并没有对于时间的格式化方法。比如，新建一个Vue文件，然后在页面输出当前时间。
<template> <p>{{shijian}}</p> </template> <script> export default { name:"shijian", data() { return { shijian:new Date() } }, } </script> <style scoped> </style> 复制代码
结果如下，这显然不是日常所见到的日期格式。
所以我们可以自定义时间过滤器对日期进行格式化。
<template> <div> <p>不格式化的时间：{{shijian}}</p> <p>格式化年月日的时间： {{shijian|shijianfilter("yyy-mm-dd")}}</p> <p>格式化精确到时分秒的时间：{{shijian|shijianfilter("yyy-mm-dd hh:mm:ss")}}</p> </div> </template> <script> export default { name:"shijian", data() { return { shijian:new Date() } }, filters:{ shijianfilter:function(value,args){ var dt = new Date(value) var y = dt.getFullYear() //这里month得加1 var m = dt.getMonth()+1 var d = dt.getDate() //如果要求的时间格式只有年月日 if(args.toLowerCase() === "yyy-mm-dd"){ return `${y}-${m}-${d}` //如果时间要求精确到时分秒 }else{ var hh = dt.getHours() var mm = dt.getMinutes() var ss = dt.getSeconds(); return `${y}-${m}-${d}:${hh}:${mm}:${ss}` } } } } </script> <style scoped> </style> 复制代码
这时输出的结果是
注意到当时间为各位的时候只显示一位，比如9月，显示为9，与我们常见的”2019-09-12样式“不一样，在ES6中有两个函数padStart()和padEnd(),可以用来进行位数不全，语法格式为：
padStart(naxlength，arg) 复制代码
第一个参数maxlength为字符串的长度，arg为补全的字符，比如：
'1'.padStart(10, '0') // 结果为"0000000001" 复制代码
即1字符串要在开头用0来补齐，补到字符串长度为10位，而padEnd()与padStart()相反，则是在字符串结尾进行补齐，padEnd()与padStart()只能应用于字符串，所以在使用时需要先将数字或者时间转换位字符串。对月日时分秒用padStart()进行补齐：
//这里month没有加1，用来显示效果 var m = dt.getMonth().toString().padStart(2,'0') var d = dt.getDate().toString().padStart(2,'0') var hh = dt.getHours().toString().padStart(2,'0') var mm = dt.getMinutes().toString().padStart(2,'0') var ss = dt.getSeconds().toString().padStart(2,'0') 复制代码
以上就是如何在Vue.js中对时间格式进行格式化，主要用到了过滤器和padEnd()与padStart()方法。
