vue定义一个带年月日得时间表

<template>

    <div>{{ dataTime }}</div>

</template>




export default {
  data() {
    return {
        dataTime: "",
        timer: "",
}
}

 mounted钩子函数里把方法给先调用一下。


 mounted() {
    this.timer = setInterval(() => {
      this.setTime();
    }, 1000);
  },

methods: {
setTime() {
      var today = new Date(); //定义日期对象
      var yyyy = today.getFullYear(); //通过日期对象的getFullYear()方法返回年
      var MM = today.getMonth() + 1; //通过日期对象的getMonth()方法返回年
      var dd = today.getDate(); //通过日期对象的getDate()方法返回年
      var hh = today.getHours(); //通过日期对象的getHours方法返回小时
      var mm = today.getMinutes(); //通过日期对象的getMinutes方法返回分钟
      var ss = today.getSeconds(); //通过日期对象的getSeconds方法返回秒
      MM = this.checkTime(MM);
      dd = this.checkTime(dd);
      mm = this.checkTime(mm);
      ss = this.checkTime(ss);
      var day; //用于保存星期(getDay()方法得到星期编号)

      if (today.getDay() == 0) day = "星期日 ";

      if (today.getDay() == 1) day = "星期一 ";

      if (today.getDay() == 2) day = "星期二 ";

      if (today.getDay() == 3) day = "星期三 ";

      if (today.getDay() == 4) day = "星期四 ";

      if (today.getDay() == 5) day = "星期五 ";

      if (today.getDay() == 6) day = "星期六 ";
      this.dataTime =
        yyyy +
        "-" +
        MM +
        "-" +
        dd +
        " " +
        hh +
        ":" +
        mm +
        ":" +
        ss +
        "   " +
        day;
    },
  checkTime(i) {
      if (i < 10) {
        i = "0" + i;
      }

      return i;
    },
}

 beforDestroy() {
    if (this.timer) {
      clearInterval(this.timer);
    }
  }

第一步先在methods钩子里面定义方法，然后data里定义数据，HTML层引用。 最后销毁页面前清除定时器。