【日期格式转换】vue日期格式转换，并实现实时显示日期时间功能

效果

正常new Date（）出来的时间是这样的：Fri Nov 26 2021 09:38:28 GMT+0800 (中国标准时间)
但是我们要的是转换成像这样的日期时间：

代码

第一步：创建一个js文件，复制进去。

/**
 * @param {date} time 需要转换的时间
 * @param {String} fmt 需要转换的格式 如 yyyy-MM-dd、yyyy-MM-dd HH:mm:ss
 */
export function formatTime(time, fmt) {
  if (!time) return '';//没传时间返回空
  else {
    const date = new Date(time);
    const o = {
      'M+': date.getMonth() + 1,//月
      'd+': date.getDate(),//日
      'H+': date.getHours(),//时
      'm+': date.getMinutes(),//分
      's+': date.getSeconds(),//秒
      'q+': Math.floor((date.getMonth() + 3) / 3),//月+3/3
      S: date.getMilliseconds(),//返回时间的毫秒
    };
    if (/(y+)/.test(fmt))//匹配1个到多个y
    //这一步把年转换完毕
    fmt = fmt.replace(
      RegExp.$1,//拿到y+匹配到的第一个分组
      (date.getFullYear() + '').substr(4 - RegExp.$1.length)
      );
      //这一步把生下的格式继续匹配转换
    for (const k in o) {
      if (new RegExp('(' + k + ')').test(fmt)) {
        fmt = fmt.replace(
          RegExp.$1,
          RegExp.$1.length === 1
            ? o[k]
            : ('00' + o[k]).substr(('' + o[k]).length)
        );
      }
    }
    return fmt;
  }
}

第二步：在你的组件内把他引入

import { formatTime } from '../utils/index.js'

第三步：在methods中复制这个方法，并在生命周期内调用一下就可以了。

  methods: {
    //当前日期时间显示：每一秒更新一次最新时间
    timeFn() {
      console.log(new Date());
      this.timing = setInterval(() => {
        //获取当前时分秒
        this.dateDay = formatTime(new Date(), 'HH: mm: ss')
        //获取当前年月日
        this.dateYear = formatTime(new Date(), 'yyyy-MM-dd')
        //获取当前周几
        this.dateWeek = this.weekday[new Date().getDay()]
      }, 1000)
    },
  }