vue实时展示当前时间在界面上

确实这个按理在js基础上就有

在data中定义一个newTime字段用于存储当前时间

data() {
    return {
        newTime: ""
    }
},

methods中编写两个函数

methods: {
      getNowTime() {
            var date = new Date();
            let Month = String(date.getMonth() + 1).length > 1?(date.getMonth() + 1):'0'+(date.getMonth() + 1);
            let Datedat = String(date.getDate()).length > 1?date.getDate():"0"+(date.getDate())
            let Hours = String(date.getHours()).length > 1?date.getHours():"0"+(date.getHours())
            let Minutes = String(date.getMinutes()).length > 1?date.getMinutes():"0"+(date.getMinutes())
            let Seconds = String(date.getSeconds()).length > 1?date.getSeconds():"0"+date.getSeconds()
            var time = date.getFullYear() + '-' + Month + '-' + Datedat + ' ' + Hours + ':' + Minutes + ':' + Seconds;
            this.newTime = time;
        },
        addZero(s) {
            return s < 10 ? ('0' + s) : s;
        },
},

然后在mounted 页面挂载完毕的生命周期中编写代码如下

mounted(){
   this.getNowTime();
    clearInterval(myTimeDisplay );
    var myTimeDisplay = setInterval(() => {
       this.getNowTime();
    }, 1000);
}

然后在界面中用插值表达式输出newTime即可

<span class = "date">{{ newTime }}</span>