作者:江夏
| 知乎:https://www.zhihu.com/people/1024-paper-96
| GitHub:https://github.com/JiangXia-1024?tab=repositories
| CSDN:https://blog.csdn.net/qq_41153943
| 掘金:https://juejin.cn/user/651387938290686
| 公众号:1024笔记
本文一共760字,阅读时长4分钟
在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()方法。
最后欢迎关注公众号:1024笔记,免费获取海量学习资源(涵盖视频、源码、文档)!
其他推荐
- steam离线模式怎么登录上去(steam连接问题/进入离线模式解决办法)
- 找到有用的视频怎么保存(一键解析视频)
- 顺丰快递柜寄件标准(快递智能柜怎么收费)
- 原神怎么去帮助好友(关于我帮原神57级萌新好友配队打通深渊12-3的事)
- 8+128便宜手机(Gen2真香机)
- 荣耀note10有液冷吗(简单分析揭开散热真相)
- cpu温度达到多少要换硅胶(固态硬盘才没白装)
- 360手机卫士安全设置方法(360*毒防隐私泄露怎么开启)
- 百世汇通快递属于百世快递吗(百世经历了什么)
- 符号制作(༗࿆࿐网名符号生成器)
- 把hosts文件删了怎么恢复(hosts被删除了怎么办)
- 哔哩哔哩会员如何升级(还能自动升级)
- 神都夜行录服务器怎么选(神都夜行录vivo渠道服)
- 飞机不能使用手机(航空公司)
- vivo哪个型号手机玩红包游戏好(10)
- 排名
- 软件
- 人气
- 下载