阅读 166

如何在Vue.js中对时间格式化

| 作者:江夏

| 知乎:www.zhihu.com/people/1024…

| GitHub:github.com/JiangXia-10…

| CSDN:blog.csdn.net/qq_4115394…

| 掘金:juejin.cn/user/651387…

| 公众号: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笔记,免费获取海量学习资源(涵盖视频、源码、文档)!

其他推荐

文章分类
前端
文章标签