前端处理后端返回的时间

后端返回的数据是这样的，我们肯定不能直接渲染到页面上 要对数据进行处理

 

首先安装日期格式转换的插件

npm install moment

1.直接在组件里面使用

import moment from "moment";

  created(){
        
        this.nowDate = moment(要转换的时间).format('YYYY-MM-DD HH:mm')
    }

或者在组件里可以定义一个局部过滤器

<div>{{ nowDateTime | formatTime }}</div>

  filters: {
    formatTime(value) {
      return moment(value).format("YYYY-MM-DD HH:mm:ss");
    }
  },

2.挂载在原型上用

import moment from 'moment'
Vue.prototype.$moment = moment;

 组件中使用

data() {
    return {
      time: this.$moment().format("YYYY-MM-DD hh:mm:ss"), 
    };
  },

3.定义全局过滤器去格式化时间

Vue.filter('dateFormat', function (daraStr, pattern = 'YYYY-MM-DD HH:mm:ss') {
  return moment(daraStr).format(pattern)
})

4.不安装moment，自定义时间处理函数

    
     export function  format (time, format) {
    var t = new Date(time);
    var tf = function (i) { return (i < 10 ? '0' : '') + i };
    return format.replace(/yyyy|MM|dd|HH|mm|ss/g, function (a) {
      switch (a) {
        case 'yyyy':
          return tf(t.getFullYear())
          break;
        case 'MM':
          return tf(t.getMonth() + 1)
          break;
        case 'mm':
          return tf(t.getMinutes())
          break;
        case 'dd':
          return tf(t.getDate())
          break;
        case 'HH':
          return tf(t.getHours())
          break;
        case 'ss':
          return tf(t.getSeconds())
          break;
      }
    })
  }

format(element.beginTime,'yyyy-MM-dd HH:mm:ss')

在需要的组件直接引入调用就行