转自 https://blog.csdn.net/cdx1170776994/article/details/82529332
首先是要回去当前时间;
这是一个获取当前时间的函数(不包含秒),记住先在data()里面声明一个全局变量nowTime
methods: {
timeFormate(timeStamp) {
let year = new Date(timeStamp).getFullYear();
let month =new Date(timeStamp).getMonth() + 1 < 10? "0" + (new Date(timeStamp).getMonth() + 1): new Date(timeStamp).getMonth() + 1;
let date =new Date(timeStamp).getDate() < 10? "0" + new Date(timeStamp).getDate(): new Date(timeStamp).getDate();
let hh =new Date(timeStamp).getHours() < 10? "0" + new Date(timeStamp).getHours(): new Date(timeStamp).getHours();
let mm =new Date(timeStamp).getMinutes() < 10? "0" + new Date(timeStamp).getMinutes(): new Date(timeStamp).getMinutes();
this.nowTime = year + "年" + month + "月" + date +"日"+" "+hh+":"+mm ;
},
}
然后就是添加定时器;
这里还是要在methods:{}里面再写一个包含定时器的函数,我的代码如下:
说明一下,nowTimes()函数要先调用timeFormate()函数,然后在写一个定时器setInterval(),定时器里面是调用nowTimes()函数自己,时间间隔是30秒(应为当前案例显示的时间要求是到分钟,30秒调用一次最合适),如果你需要显示秒的话就在timeFormate()函数里面把秒钟获取到,然后定时间隔设置为1秒调用一次就好了。
methods: {
// 获取当前时间函数
timeFormate(timeStamp) {
let year = new Date(timeStamp).getFullYear();
let month =new Date(timeStamp).getMonth() + 1 < 10? "0" + (new Date(timeStamp).getMonth() + 1): new Date(timeStamp).getMonth() + 1;
let date =new Date(timeStamp).getDate() < 10? "0" + new Date(timeStamp).getDate(): new Date(timeStamp).getDate();
let hh =new Date(timeStamp).getHours() < 10? "0" + new Date(timeStamp).getHours(): new Date(timeStamp).getHours();
let mm =new Date(timeStamp).getMinutes() < 10? "0" + new Date(timeStamp).getMinutes(): new Date(timeStamp).getMinutes();
// let ss =new Date(timeStamp).getSeconds() < 10? "0" + new Date(timeStamp).getSeconds(): new Date(timeStamp).getSeconds();
// return year + "年" + month + "月" + date +"日"+" "+hh+":"+mm ;
this.nowTime = year + "年" + month + "月" + date +"日"+" "+hh+":"+mm ;
// console.log(this.nowTime);
},
// 定时器函数
nowTimes(){
this.timeFormate(new Date());
setInterval(this.nowTimes,30*1000);
},
}
最后,就是在生命钩子里面调用;
你可以看到我在两个生命钩子里面调用了,其实我就是告诉你这两个随便选一个调用就好了。
// 创建完成时
created() {
this.nowTimes();
},
// 挂载完成时
mounted(){
this.nowTimes();
},
这样就就大功告成了。。。
对了记得调用使用
<div >
<p>当前时间:{{nowTime}}</p>
</div>
好了,完成!!!
---------------------
作者:cdx1170776994
来源:CSDN
原文:https://blog.csdn.net/cdx1170776994/article/details/82529332
版权声明:本文为博主原创文章,转载请附上博文链接!