Vue中使用dayjs转换时间格式并实时显示当前时间

参考：https://blog.csdn.net/qq_40323256/article/details/125880313https://blog.csdn.net/qq_40323256/article/details/125880313 

相比moment，dayjs更轻量，推荐dayjs 

【此外，moment也可以实现类似的功能，见：vue中使用moment格式化时间_asdfsdgfsdgfa的博客-CSDN博客_moment vue】

比如将 2020-12-09T09:06:46.086Z 转换为： 2020-12-09 17:06:46

这里直接使用插件：dayjs 来实现

一、下载dayjs

cnpm i -S dayjs

二、引入dayjs

如果在node中，引入方式为：let dayjs=require('dayjs')

如果在vue项目中，在main.js中全局引入：

import dayjs from "dayjs"
Vue.prototype.$dayjs = dayjs;

三、使用

YYYY等这些特别要注意大小写！！

更简便的方式：

四、效果

如果不嫌麻烦的话，也可以自己转换，可参考：vue实时显示当前时间和天气_asdfsdgfsdgfa的博客-CSDN博客_vue 展示当前时间

此外，可封装一个vue实时显示时间的组件，代码如下：（此时用局部引入day.js）

RealTime/index.vue:

vue3中：

// 计时器
const timer = ref();
const dateYMD = ref();
const dateHMS = ref();
const dateWeek = ref();
onMounted(() => {timer.value = setInterval(() => {const currentDate = dayjs(new Date());dateYMD.value = currentDate.format("YYYY-MM-DD");dateHMS.value = currentDate.format("HH:mm:ss");dateWeek.value = currentDate.format(["星期日", "星期一", "星期二", "星期三", "星期四", "星期五", "星期六"][currentDate.day()]);});
});
onBeforeUnmount(() => {if (timer.value) {clearInterval(timer.value);}
});

本文来自互联网用户投稿，文章观点仅代表作者本人，不代表本站立场，不承担相关法律责任。如若转载，请注明出处。 如若内容造成侵权/违法违规/事实不符，请点击【内容举报】进行投诉反馈！