Vue实现获取当前时间、日期并实时刷新

Vue实现获取当前时间、日期并实时刷新

1. 获取当前时间的方法

getTime(){
        var _this = this;
        let yy = new Date().getFullYear();
        let mm = new Date().getMonth()+1;
        let dd = new Date().getDate();
        let hh = new Date().getHours();
        let mf = new Date().getMinutes()<10 ? '0'+new Date().getMinutes() : new Date().getMinutes();
        let ss = new Date().getSeconds()<10 ? '0'+new Date().getSeconds() : new Date().getSeconds();
        _this.data.nowDateTime = yy+'年 '+mm+'月'+dd+'日 '+hh+':'+mf+':'+ss;
      }

2. 创建定时器

currentTime(){
      setInterval(this.getTime,500)
    },

3. 在生命周期函数中触发定时器

created() {
	this.currentTime();
}

4. data中设置数据绑定项

data() {
    return {
     nowDateTime: '',//当前日期时间
     }

5. 页面展示绑定的数据

<span>{{nowDateTime}}</span>