在页面中如何用Vue显示日期

在data中定义一个变量，来存储时间：

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

在页面中写一个盒子用来装日期的数据：

    
{{ newTime }}

在进入页面时（mounted中）更新显示最新时间，之后每隔一秒变化一次时间：

mounted() {
  this.getNowTime(); //进入页面调用该方法获取当前时间
  clearInterval(myTimeDisplay); //销毁之前的定时器
  var myTimeDisplay = setInterval(() => {
    this.getNowTime(); //每隔一秒会再次更新时间
  }, 1000);
},

在metheds中编写具体时间变化代码：

methods: {
    // 获取当前时间
    getNowTime() {
      var _this = this;
      let yy = new Date().getFullYear();
      let mm =
        new Date().getMonth() + 1 < 10
          ? "0" + new Date().getMonth() + 1
          : new Date().getMonth() + 1;
      let dd =
        new Date().getDate() < 10
          ? "0" + new Date().getDate()
          : new Date().getDate();
      let hh =
        new Date().getHours() < 10
          ? "0" + new Date().getHours()
          : 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.newTime =
        yy + "年" + mm + "月" + dd + "日" + hh + "时" + mf + "分" + ss + "秒";
    },
  },

在页面中显示的结果：