vue中实现时间格式化 dayjs插件

vue中实现时间格式化 dayjs插件_第1张图片

 

1.项目中将dayjs写成组件(common.js  => 在common.js内引入 import dayjs from "dayjs";)

 vue中实现时间格式化 dayjs插件_第2张图片

2.使用页面  app.vue

   引入common.js;  import { parseDate2Str } from "@/util/common.js";

   nowDate初始值取当前时间,并格式化;  nowDate: parseDate2Str(new Date(), "YYYY-MM-DD HH:mm:ss");

   使用定时器,隔一秒取一次;然后实例销毁前,清除定时器;

vue中实现时间格式化 dayjs插件_第3张图片

vue中实现时间格式化 dayjs插件_第4张图片

3.相关少许代码,贴码

 common.js内组件的时间及格式化

export function parseDate2Str(date, format) {
  format = format || "YYYY-MM-DD HH:mm:ss";
  return dayjs(date).format(format);
}

app.vue内定时器及清除定时器代码

 created() {
    //定时器:获取本地时间
    this.timer = setInterval(() => {
      this.nowDate =parseDate2Str(new Date(), "YYYY-MM-DD HH:mm:ss")
    }, 1000);
  },
  beforeDestroy() {
    //在vue实例销毁前,清除定时器
    if (this.timer) {
      clearInterval(this.timer);
    }
  }

实现效果  (时间隔一秒跳一次)

 

 

 

 

转载于:https://www.cnblogs.com/chr506029589/p/11598063.html

你可能感兴趣的:(vue中实现时间格式化 dayjs插件)