Vue頁面上實時顯示當前時間，每秒更新

　　有時候我們需要在頁面上添加一個類似時鍾的東西來實時顯示當前時間，這個時候我們可以利用定時器來完成這個功能

<div id="app"> {{date}} </div>

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

 

這里的{{ date }}輸出的是瀏覽器默認的時間格式，比如"2018-10-23T02:07:09.894Z"，並非格式化時間yyyy-MM-dd hh:mm:ss，所以要注意時區。

這里有多種方法可以對時間格式化，比如賦值前先使用自定義函數處理，Vue的過濾器（filter）或計算屬性（computed）也可以實現，這些以后寫到。

 

 

嗯，就醬~~