Vue页面实现时间动态更新

1、data

data() {
    return {
        myDateTime: ""
    }
}

2、mouted

  mounted() {

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

3、methods

 methods: {
    getCurrentTime() {
      let self = this
      //获取当前时间
      var date = new Date();
      var year = date.getFullYear(); //当前年份
      var month = date.getMonth(); //当前月份
      var data = date.getDate(); //天
      var hours = date.getHours(); //小时
      var minute = date.getMinutes(); //分
      var second = date.getSeconds(); //秒
      var time =
        year +
        "-" +
        (month + 1) +
        "-" +
        data +
        "      " +
        hours +
        ":" +
        minute +
        ":" +
        second;
      self.dateTime = time;
    },
}

4、最后在需要显示时间的地方加上下面一行即可

<span class="list">{{myDateTime}}</span>