动态展示当前时间

 

<template>
<div>
    <H1>当前日期 ：{{ FormatTime(nowTime) }}</H1>
</div>
</template>



<script>


export default {
   data() {
    return {
      timer: undefined,
      nowTime: new Date(),
      latedata:"2020-1-9",
    }
  },
 
  created() {
    // 显示时间，在渲染页面之前一直调用该函数，对this.time进行赋值
      this.timer = setInterval(() => {
      this.nowTime= new Date().toLocaleString();
    });
  },
// 销毁定时器
  beforeDestroy() {
    if (this.timer) {
      clearInterval(this.timer);
    }
  },
 
  methods: {
    FormatTime() {
      //返回显示的日期时间格式
      var date = new Date();
      var year = this.formatTime(date.getFullYear());
      var month = this.formatTime(date.getMonth() + 1);
      var day = this.formatTime(date.getDate());
      var hour = this.formatTime(date.getHours());
      var minute = this.formatTime(date.getMinutes());
      var second = this.formatTime(date.getSeconds());
      var weekday = date.getDay();
      var weeks = new Array(
          "星期日",
          "星期一",
          "星期二",
          "星期三",
          "星期四",
          "星期五",
          "星期六"
      );
      var week = weeks[weekday];
      return `${year}-${month}-${day} ${hour}:${minute}:${second} ${week}`;
    },
    formatTime(n) {
      //判断是否需要加0
      if (n < 10) {
        return "0" + n;
      } else {
        return n;
      }
    },
  }
};
</script>

 

2：注意点：

（1）created( ) 与 mounted( )的区别就是：
       created 在模板渲染成html前调用，即通常初始化某些属性值，然后再渲染成视图
      mounted在模板渲染成html后调用，通常是初始化页面完成后，再对html的dom节点进行一些需要的操作。

（2）setInterval()的使用
     setInterval() 方法会不停地调用函数，直到 clearInterval() 被调用或窗口被关闭。由 setInterval() 返回的 ID 值可用作 clearInterval() 方法的参数。

来源：https://blog.csdn.net/weixin_51472505/article/details/123129435