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

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文件

创建一个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

5、实时显示时间

<template>
  <div>{{date}}</div> //放置时间
</template>

<script>
export default {
  data () {
    return {
      date: new Date()
    }
  },
  mounted () {
    // 声明一个变量指向Vue实例this,保证作用域一致
    let _this = this
    this.timer = setInterval(() => {
      // 修改数据date
      _this.date = new Date().toLocaleString()
    }, 1000)
  },
  beforeDestroy () {
    if (this.timer) {
      // 在vue实例销毁前，清除我们的定时器
      clearInterval(this.timer)
    }
  }
}
</script>

6、10位/13位时间戳转日期

export function timestampToTime (timestamp) {
  let date
  //判断是否为空，空值的话 会报错
  if (timestamp == null) return
  //时间戳为10位需*1000，时间戳为13位的话不需乘1000
  timestamp.length === 10 ? date = new Date(parseInt(timestamp * 1000)) : date = new Date(parseInt(timestamp));
  let Y = date.getFullYear() + '-';
  let M = (date.getMonth() + 1 < 10 ? `0${(date.getMonth() + 1)}` : date.getMonth() + 1) + '-';
  let D = date.getDate() + ' ';
  let h = date.getHours() + ':';
  let m = (date.getMinutes() < 10 ? `0${date.getMinutes()}` : date.getMinutes()) + ':';
  let s = date.getSeconds() < 10 ? `0${date.getSeconds()}` : date.getSeconds();
  return Y + M + D + h + m + s;
}


let a = "1624945115227" 
console.log(timestampToTime(a))
 //打印出 2021-06-29 13:38:35

七、日期转13位时间戳

 Date.parse(time)