vue.js设置时间格式的方法-创新互联

小编给大家分享一下vue.js设置时间格式的方法，希望大家阅读完这篇文章后大所收获，下面让我们一起去探讨吧！

我们提供的服务有：成都做网站、成都网站设计、微信公众号开发、网站优化、网站认证、栖霞ssl等。为上千余家企事业单位解决了网站和推广的问题。提供周到的售前咨询和贴心的售后服务，是有科学管理、有技术的栖霞网站制作公司

vue.js设置时间格式的方法：首先新建一个Vue示例文件；然后通过采用自定义时间过滤器对日期进行格式化即可，其代码如“filters:{shijianfilter:function(value,args){...}”。

在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>

这时输出的结果是

看完了这篇文章，相信你对vue.js设置时间格式的方法有了一定的了解，想了解更多相关知识，欢迎关注创新互联行业资讯频道，感谢各位的阅读！

网页名称：vue.js设置时间格式的方法-创新互联
网页路径：https://www.cdcxhl.com/article42/disdhc.html

成都网站建设公司_创新互联，为您提供网站策划、微信小程序、营销型网站建设、品牌网站设计、响应式网站、品牌网站制作

广告

声明：本网站发布的内容（图片、视频和文字）以用户投稿、用户转载内容为主，如果涉及侵权请尽快告知，我们将会在第一时间删除。文章观点不代表本网站立场，如需处理请联系客服。电话：028-86922220；邮箱：631063699@qq.com。内容未经允许不得转载，或转载时需注明来源： 创新互联