Vue使用day.js格式化時間,並實時每秒更新


項目需要實時展示日期時間,每秒更新,第一時間想到的就是day.js
首先通過npm安裝

npm install dayjs --save

在main.js中引入並將day.js綁定到vue上

 import dayjs from 'dayjs';
 Vue.prototype.dayjs = dayjs;

現在可以直接在模板或者vue中調用dayjs,實時更新我們需要在加載的時候通過setInterval實現,使用定時器也必須要清除掉

data() {
    return {
        data:this.dayjs().format('YYYY年MM月DD日 HH:mm:ss'),
    };
  },

mounted(){
      let self = this;
      this.timer = setInterval(()=>{
          self.data = this.dayjs().format('YYYY年MM月DD日 HH:mm:ss')
      },1000)
  },
  beforeDestroy(){
      if(this.timer){
          //組件銷毀時,清除定時器
          clearInterval(this.timer)
      }
  },

然后模板文件中直接調用{{data}}就可以了。


免責聲明!

本站轉載的文章為個人學習借鑒使用,本站對版權不負任何法律責任。如果侵犯了您的隱私權益,請聯系本站郵箱yoyou2525@163.com刪除。



 
粵ICP備18138465號   © 2018-2025 CODEPRJ.COM