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

比如将2020-12-09T09:06:46.086Z转换为：2020-12-09 17:06:46这里直接使用插件：dayjs来实现一、下载dayjscnpm i -S dayjs二、引入dayjs如果在node中，引入方式为：vardayjs=require('dayjs')如果在vue项目中，引入方式为：import dayjs from "dayjs"Vue.prototype.dayjs

asdfsdgfsdgfa

8122人浏览 · 2020-12-09 17:14:04

asdfsdgfsdgfa · 2020-12-09 17:14:04 发布

参考：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;

三、使用

<template>
  <div>
    {{dateYear}} {{dateWeek}} {{dateDay}}
  </div>
</template>

<script>
export default {
  data () {
    return {
      dateDay: null,
      dateYear: null,
      dateWeek: null,
      weekday: ["周日", "周一", "周二", "周三", "周四", "周五", "周六"],
      timer:null
    };
  },
  mounted () {
    this.timer =setInterval(() => {
        const date=this.$dayjs(new Date())
        this.dateDay = date.format('HH:mm:ss');
        this.dateYear = date.format('YYYY-MM-DD');
        this.dateWeek = date.format(this.weekday[date.day()]);

      }, 1000)
  },
  beforeDestroy(){
    if(this.timer){
      clearInterval(this.timer)
    }
  }
};
</script>

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

更简便的方式：

<template>
  <div>
    {{current_timestamp }}
  </div>
</template>

<script>
export default {
  data () {
    return {
      // 当前实时时间
      current_timestamp: "2023-03-13 11:11:34",
      // 定时器
      timer: null,
    };
  },
  mounted () {
    // 初始化定时器
    this.timer = setInterval(() => {
      this.current_timestamp = this.$dayjs().format("YYYY-MM-DD HH:mm:ss");
    }, 1000);
  },
  beforeDestroy(){
    if(this.timer){
      clearInterval(this.timer)
    }
  }
};
</script>

四、效果

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

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

RealTime/index.vue:

<template>
  <div>{{ dateYear }} {{ dateDay }} {{ dateWeek }}</div>
</template>
 
<script>
import dayjs from "dayjs";
export default {
  data() {
    return {
      dateDay: null,
      dateYear: null,
      dateWeek: null,
      weekday: ["周日", "周一", "周二", "周三", "周四", "周五", "周六"],
      timer: null,
    };
  },
  mounted() {
    this.timer = setInterval(() => {
      const date = dayjs(new Date());
      this.dateDay = date.format("HH:mm:ss");
      this.dateYear = date.format("YYYY-MM-DD");
      this.dateWeek = date.format(this.weekday[date.day()]);
    }, 1000);
  },
  beforeDestroy() {
    if (this.timer) {
      clearInterval(this.timer);
    }
  },
};
</script>

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);
  }
});