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

小灰灰 2021-09-03 10:27 1402阅读 0赞

【此外，moment也可以实现类似的功能，见：[https://blog.csdn.net/qq\_40323256/article/details/116421736][https_blog.csdn.net_qq_40323256_article_details_116421736]】

比如将 **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等这些特别要注意大小写！！**

### 四、效果 ###

![20210312094804582.gif][]

如果不嫌麻烦的话，也可以自己转换，可参考：[https://blog.csdn.net/qq\_40323256/article/details/102867033][https_blog.csdn.net_qq_40323256_article_details_102867033]

此外，可封装一个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>

[https_blog.csdn.net_qq_40323256_article_details_116421736]: https://blog.csdn.net/qq_40323256/article/details/116421736
[20210312094804582.gif]: /images/20210725/a2f2cd429cd8458580bc7d299c8718a5.png
[https_blog.csdn.net_qq_40323256_article_details_102867033]: https://blog.csdn.net/qq_40323256/article/details/102867033