小编给大家分享一下vue.js设置时间格式的方法,希望大家阅读完这篇文章后大所收获,下面让我们一起去探讨吧!
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。内容未经允许不得转载,或转载时需注明来源: 创新互联