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