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

格式化时间

- 1、插件的使用
- 2、定义一个时间过滤器
- 3、封装一个文件
- 4、直接转换
- 5、实时显示时间
- 6、10位/13位时间戳转日期
- 七、日期转13位时间戳

1、插件的使用

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

安装:

npm install moment

引入(局部):

import moment from 'moment'

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

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

2、定义一个时间过滤器

在文件中，定义一个时间过滤器

// 定义一个过滤器 处理时间
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、封装一个文件

创建一个文件：

/**
 * @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中引入

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

在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)

秒客网