項目需要實時展示日期時間,每秒更新,第一時間想到的就是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}}就可以了。
