Vue在页面中实时刷新当前时间

Vue + Element-UI页面设计

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>

注意事项：

getTime()、currentTime()写在methods代码块中
created()、data()写在export default代码块中

交流QQ学习群：559369389
关注微信公众号：“修电脑的杂货店” 每天掌握核心知识！biubiubiu~