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}}就可以了。
分类:
Javascript
, Vue
【推荐】国内首个AI IDE,深度理解中文开发场景,立即下载体验Trae
【推荐】编程新体验,更懂你的AI,立即体验豆包MarsCode编程助手
【推荐】抖音旗下AI助手豆包,你的智能百科全书,全免费不限次数
【推荐】轻量又高性能的 SSH 工具 IShell:AI 加持,快人一步
· 阿里最新开源QwQ-32B,效果媲美deepseek-r1满血版,部署成本又又又降低了!
· 单线程的Redis速度为什么快?
· SQL Server 2025 AI相关能力初探
· AI编程工具终极对决:字节Trae VS Cursor,谁才是开发者新宠?
· 展开说说关于C#中ORM框架的用法!