基于vue使用dayjs实现动态实时更新时间

dayjs是一个轻量的处理时间和日期的 JavaScript 库。国内官方文档：https://dayjs.gitee.io/zh-CN/

1 安装dayjs包

npm install dayjs

2 导入dayjs

在vue项目的main.js文件中添加import dayjs from 'dayjs'导入dayjs，如下图所示：

3 添加test.vue

创建test.vue并在index.js中添加test页面,，如下图所示：

在views/下添加test.vue文件，其页面代码如下：

<template>
	{{currentTime}}
</template>
<script>
	import dayjs from 'dayjs';
	export default {
		data() {
			return {
				currentTime: dayjs().format('YYYY年MM月DD日 HH:mm:ss'),
			}
		},
		mounted() {
			let self = this;
			this.timer = setInterval(() => {
				self.currentTime = dayjs().format('YYYY年MM月DD日 HH:mm:ss')
			}, 1000)
		},
		beforeDestroy() {
			if (this.timer) {
				//组件销毁时，清除定时器
				clearInterval(this.timer)
			}
		},
	}
</script>
<style>
</style>

4 测试

在浏览器中打开此test地址，成功: