Using dayjs to realize dynamic real-time update time based on Vue

Dayjs is a lightweight JavaScript library that handles time and date.

Chinese official documents:https://dayjs.gitee.io/zh-CN/

1 Install Dayjs Package

npm install dayjs

2 Import Dayjs

In main.jsfile,add import dayjs from 'dayjs' to import dayjs,as shown in the following figure:

3 Add test.vue

create test.vueand add a test page in index.js,as shown in the following figure:

add test.vue file below views/ package,The page code is as follows:

<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

Open this test address in the browser. Success: