Vue js实时显示当前时间

转自   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 
版权声明：本文为博主原创文章，转载请附上博文链接！