vue頁面添加當前日期，並且格式化

1.在vue頁面定義一個div放置時間：

<div>
 <h3 v-model="date" id="timeStyle">當前日期：{{date | formatDate}}</h3>
</div>

2.在mounted中定義定時器和定時器的銷毀方法

  mounted() {
    let _this = this; // 聲明一個變量指向Vue實例this，保證作用域一致
    this.timer = setInterval(() => {
      _this.date = new Date(); // 修改數據date
    }, 1000)
  },
  beforeDestroy() {
    if (this.timer) {
      clearInterval(this.timer); // 在Vue實例銷毀前，清除我們的定時器
    }
  },
  beforeDestroy: function () {
    if (this.timer) {
      clearInterval(this.timer);
    }
  },

3.定義一個時間格式化的過濾器

var padDate = function (value) {
  return value <10 ? '0' + value:value;
};

//時間過濾器
  filters: {
    formatDate:function (value) {
      var date = new Date(value);
      var year = date.getFullYear();
      var month = padDate(date.getMonth()+1);
      var day = padDate(date.getDate());
      var hours = padDate(date.getHours());
      var minutes = padDate(date.getMinutes());
      var seconds = padDate(date.getSeconds());
      //var week = padDate(date.getDay());
      let week = new Date(value).getDay();
      let weeks = ["日","一","二","三","四","五","六"];
      let getWeek = "星期" + weeks[week];
      //return year + '-' + month + '-' + day +' '+'|' + ' ' + hours + ':' + minutes + ':' + seconds + ' ' +getWeek;
      return year + '-' + month + '-' + day +' '+'|'+' '  +getWeek;
    }
  },

4.在style中定義時間顯示的格式

#timeStyle{
  color: #bcdcff;
  right: 180px;
  top: 20px;
  font-size: 16px;
  position: absolute;
}

5.時間顯示效果