Vue中处理时间问题

Vue中处理时间问题

一般情况后台传回来的时间格式是时间戳形式，前端需要自己转化时间，但每次都把后端所传数据forEach出来转化特别麻烦，所以封装一个js就可以通用了。

export function formatDate(date, fmt) {
  if (/(y+)/.test(fmt)) {
    fmt = fmt.replace(RegExp.$1, (date.getFullYear() + '').substr(4 - RegExp.$1.length))
  }
  let otime = {
    'M+': date.getMonth() + 1,
    'd+': date.getDate(),
    'h+': date.getHours(),
    'm+': date.getMinutes(),
    's+': date.getSeconds()
  }
  for (let k in otime) {
    if (new RegExp(`(${k})`).test(fmt)) {
      let str = otime[k] + ''
      fmt = fmt.replace(RegExp.$1, (RegExp.$1.length === 1) ? str : padLeftZero(str))
    }
  }
  return fmt
}

function padLeftZero(str) {
  return ('00' + str).substr(str.length)
}

在实际页面中使用转化时间格式

1.引入封装的js

import {formatDate} from '../../../assets/js/datatime'

2.使用 Vue的过滤器

filters: {
  formatDate(time) {
    time = time * 1000;
    let date = new Date(time);
    console.log(new Date(time));
    return formatDate(date, 'yyyy-MM-dd')
  }
},

如果只需要年就 return formatDate(date, 'yyyy‘)；

只需要月就 return formatDate(date, ‘MM’)；

依次类推

在页面中使用时引入| formatDate就好了

<p>提交时间：{{item.createtime | formatDate}}</p>