Vue每秒时间更新一次，傻瓜式实现时间灵活调动。

本文链接：https://blog.csdn.net/QQ675396947/article/details/124295848

首先我们在 methods 中进行书写时间的方法，在methods定义年月日时分秒等进行一个初步构造。

getCurrentTime() {
        //获取当前时间并打印
        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.gettime = yy+'-'+mm+'-'+dd+' '+hh+':'+mf+':'+ss;
    this.Samplingtime=_this.gettime;
    console.log(_this.gettime)  
    }

然后在 Vue的周期函数中的mounted()里面进行设置每秒调用一次。

 mounted() {
     this.getCurrentTime();
    clearInterval(myTimeDisplay );
    let myTimeDisplay = setInterval(() => {
      this.getCurrentTime(); //每秒更新一次时间
    }, 1000);
  },

最终代码：

<template>
<div>{{Samplingtime}}</div>
</template>
export default {
  data() {
    return {
      //取样时间
      Samplingtime:'',
    };
  },
 mounted() {
     this.getCurrentTime();
    clearInterval(myTimeDisplay );
    let myTimeDisplay = setInterval(() => {
      this.getCurrentTime(); //每秒更新一次时间
    }, 1000);
  },
  

methods: {
    //时间 
    getCurrentTime() {
        //获取当前时间并打印
        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.gettime = yy+'-'+mm+'-'+dd+' '+hh+':'+mf+':'+ss;
    this.Samplingtime=_this.gettime;
    console.log(_this.gettime)  
    }
}
}