vue 格式化时间(多种方法)

格式化时间:

以下介绍三种时间格式化方式
1、moment.js插件的使用
2、定义一个时间过滤器
3、外部引入一个time.js文件
4、直接转换

1、moment.js插件的使用
后端传了一个 2020-11-27T12:01:50.942 00:000 这样的时间过来,结果我发现我之前用的时间过滤器竟然不能把这个时间转化成正确时间,于是就发现moment.js这个插件啦~
同时，感谢一个up主的文章解惑。原来，前端从mysql取出timestamp类型的时间与实际时间差8小时。

安装:

npm install moment

引入(局部):

import moment from 'moment'

把后台获取到的时间直接格式化,在丢到data中

time: moment(elem.gmtCreate).format('YYYY-MM-DD hh:mm:ss'),

2、定义一个时间过滤器
在main.js文件中，定义一个时间过滤器

// 定义一个过滤器 处理时间
Vue.filter('dateFormat', function (originVal) {
     
  const dt = new Date(originVal)
  const y = dt.getFullYear()
  // 月份从0开始,使她变成字符串,不足两位时,前面补个0.
  const m = (dt.getMonth() + 1 + '').padStart(2, '0')
  const d = (dt.getDate() + '').padStart(2, '0')
  const hh = (dt.getHours() + '').padStart(2, '0')
  const mm = (dt.getMinutes() + '').padStart(2, '0')
  const ss = (dt.getSeconds() + '').padStart(2, '0')
  return `${
       y}-${
       m}-${
       d} ${
       hh}:${
       mm}:${
       ss}`
})

在需要转化时间的组件中直接使用：

 <template slot-scope="scope">
            {
     {
     scope.row.add_time | dateFormat}}
 </template>

3、外部引入一个time.js文件
3.1创建一个time.js文件：

/**
 * @param {Function} fn 防抖函数
 * @param {Number} delay 延迟时间
 */
export function debounce (fn, delay) {
     
  var timer
  return function () {
     
    var context = this
    var args = arguments
    clearTimeout(timer)
    timer = setTimeout(function () {
     
      fn.apply(context, args)
    }, delay)
  }
}

/**
 * @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),
      S: date.getMilliseconds()
    }
    if (/(y+)/.test(fmt)) {
     
      fmt = fmt.replace(
        RegExp.$1,
        (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
  }
}

在data中：

 dateDay: null,
 dateYear: null,
 dateWeek: null,
 weekday: ['周日', '周一', '周二', '周三', '周四', '周五', '周六'],

在script中引入time.js

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

在created(){}中：

this.timeFn()

在methods中：

timeFn () {
     
      setInterval(() => {
     
        this.dateYear = formatTime(new Date(), 'yyyy-MM-dd')
        this.dateWeek = this.weekday[new Date().getDay()]
        this.dateDay = formatTime(new Date(), 'HH: mm: ss')
      }, 1000)
    },

在template把时间渲染在页面上：

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

4、直接转换
此转换出来的结构为，如： 2020/11/30 下午3:06:15

 const date = new Date().toLocaleString()
 this.dialogData = {
     }
 this.dialogData.now = date