vue 日期字符串格式化

前言

建议在 src 目录下新建一个 common 文件夹，新建 date.js 文件

date.js

/**
 * @desc 格式化日期字符串
 * @param { String } - [date] 日期字符串(2020-01-14 13:43:23)
 * @param { String } - [formatStr] 日期格式
 */
export function formatDate(params) {
  let defalutParams = {
    date: new Date(new Date().getTime()),
    formatStr: 'yyyy-MM-dd HH:mm:ss'
  };
  params = { ...defalutParams, ...params };

  let date = new Date(new Date(params.date).getTime());
  let formatStr = params.formatStr;

  formatStr = formatStr.replace(new RegExp('yyyy'), `${date.getFullYear()}`);
  const month = date.getMonth() + 1;
  formatStr = formatStr.replace(new RegExp('MM'), `${month > 9 ? month : '0' + month}`);
  const day = date.getDate();
  formatStr = formatStr.replace(new RegExp('dd'), `${day > 9 ? day : '0' + day}`);
  const hour = date.getHours();
  formatStr = formatStr.replace(new RegExp('HH'), `${hour > 9 ? hour : '0' + hour}`);
  const min = date.getMinutes();
  formatStr = formatStr.replace(new RegExp('mm'), `${min > 9 ? min : '0' + min}`);
  const sec = date.getSeconds();
  formatStr = formatStr.replace(new RegExp('ss'), `${sec > 9 ? sec : '0' + sec}`);

  return formatStr;
}

组件使用

<template>
  <div>
    <p>{{ date }}</p>
    <p>{{ date2 }}</p>
    <p>{{ date3 }}</p>
  </div>
</template>

<script>
import { formatDate } from '@/common/date.js';

export default {
  data() {
    return {
      date: '',
      date2: '',
      date3: ''
    };
  },
  mounted() {
    const str = '2020-01-14 13:43:23';
    this.date = formatDate({ date: str, formatStr: 'yyyy-MM-dd' });
    this.date2 = formatDate({ date: str, formatStr: 'HH:mm:ss' });
    this.date3 = formatDate({ date: str, formatStr: 'yyyy-MM-dd HH:mm:ss' });
  }
};
</script>

效果图

如果本篇文章对你有帮助的话，很高兴能够帮助上你。

当然，如果你觉得文章有什么让你觉得不合理、或者有更简单的实现方法又或者有理解不来的地方，希望你在看到之后能够在评论里指出来，我会在看到之后尽快的回复你。