vue中时间格式转换：

例如后端返回时间：127465757

转换成：2019-03-01 11:11:51  格式

方法：

一、在mothods中添加这行代码：moment:moment,

二、然后在数据需要放置的地方添加：{{moment(cldata.createDate).format(‘YYYY-MM-DD HH:mm:ss’)}}

刚开始写的时候是用这种方式转换的
// 时间格式转换
Vue.filter('dateFormat', function (origin) {
  const newDate = new Date(origin);
  const n = newDate.getFullYear();
  const y = (newDate.getMonth() + 1 + '').padStart('2', '0');
  const r = (newDate.getDay() + '').padStart('2', '0');
  const s = (newDate.getHours() + '').padStart('2', '0');
  const f = (newDate.getMinutes() + '').padStart('2', '0');
  const m = (newDate.getSeconds() + '').padStart('2', '0');
  return `${n}/${y}/${r} ${s}:${f}:${m}`
})

但是这边就出现这样的情况，如下图


然后我们可以通过moment转换

首先npm或cnpm install moment --save 来下载依赖，然后在main.js中引入moment,然后通过filter过滤

具体的moment更多转换见官网http://momentjs.cn/

import moment from 'moment';

// 定义全局时间戳过滤器
 Vue.filter('formatDate', function(value) {
   return moment(value).format('YYYY-MM-DD HH:mm:ss')
 })

但是吧，项目中又出现问题了，如图



页面中是这样的Invalid date 无效的日，很气人吧，这个原因是后端返回的时间戳是一个字符串，这个时候我们可以将字符串转换成数字
// 定义全局时间戳过滤器
 Vue.filter('formatDate', function(value) {
   return moment(Number(value)).format('YYYY-MM-DD HH:mm:ss')
 })


这样就解决问题啦

前言：最近做的项目中经常要处理时间格式，做个小总结了~~
第一种：使用过滤器，在页面中使用

1.新建formDate.js
//时间格式函数
export function formatDate(date, fmt) {
  if (/(y+)/.test(fmt)) {
    fmt = fmt.replace(RegExp.$1, (date.getFullYear() + '').substr(4 - RegExp.$1.length));
  }
  var dateTime = new Date(date);
   var data = new Date(date);
  let o = {
    'M+': date.getMonth() + 1,
    'd+': date.getDate(),
    'h+': date.getHours(),
    'm+': date.getMinutes(),
    's+': date.getSeconds(),                //秒   
    "q+": Math.floor((dateTime.getMonth() + 3) / 3), //季度   
    "S": dateTime.getMilliseconds()
  };
  for (let k in o) {
    if (new RegExp(`(${k})`).test(fmt)) {
      let str = o[k] + '';
      fmt = fmt.replace(RegExp.$1, (RegExp.$1.length === 1) ? str : padLeftZero(str));
    }
  }
  return fmt;
};

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

2.在使用的页面中引入
 <!-- 在页面中调用 -->
<div>{{time | formatDate}}</div>

<script>
import { formatDate } from "formadate.js";//路径要注意下
export default {
  name: "",
  data() {
    return {
      time: new Date(),
    };
  },
  filters: {
    formatDate(time) {
      var data = new Date(time);
      return formatDate(data, "yyyy-MM-dd")
    }
  },

};
</script>


第二种：在js中使用
 //也是一样的时间格式转换
    formatDate: function(nS) {
      let date = new Date(nS);
      let year = date.getFullYear();
      let month = date.getMonth() + 1;
      let day = date.getDate();
      let H = date.getHours();
      let i = date.getMinutes();
      let s = date.getSeconds();
      month = month < 10 ? "0" + month : month;
      day = day < 10 ? "0" + day : day;
      date = H + ":" + i;
      return date;
    }
    let time = "1561422606000";//转化时间戳格式 转换其他的时间格式也同样好用了
    this.formatDate(Number(time)) //这里是时：分格式
    ```

在写项目中，一般会调用接口，调用接口返回来的时间是一串数字，那么如何处理这些数字呢？


一、在main.js中引入
//时间转换
Vue.filter('dateFormat', function (originVal) {
const dt = new Date(originVal)
const y = dt.getFullYear()
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}`
})

二、在组件中



然后去浏览器看看



发现都是NaN,然后去查找资料
发现：接口返回的数据是String类型的,需要转换成Number类型


再去浏览器look look



看到时间转换过来了，但是又发现时间对不上，然后查资料
如果接口返回的数字一共有10位，需要x1000,如果是13位的话，就直接用


浏览器看效果



然后时间就转换成功了，OK！