vue中通过时间戳格式化时间

后台传过来long类型的时间戳在vue中格式化成指定类型

• 编写写时间格式化函数

export function _dateFormat(date,fmt) {
    var 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(var 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;
}

• 在组件中引入该函数

import {_dateFormat} from "../../utils/dateFormat"

• 需要通过vue的filter来过滤

filters:{
    //格式化后台传过来的时间戳
    dateFormat(time) {
      let date = new Date(time);
      return _dateFormat(date,'yyyy-MM-dd hh:mm')
    }
  }

• 最后在页面中使用

 <!-- 发布时间 -->
   <span>
     <i class="iconfont" style="font-size:14px;">&#xe619;</i>
     <em>&nbsp;{{article.gmtCreate | dateFormat}}</em>
   </span>

总结

• 若是在页面中直接调用编写的时间格式化工具函数_dateFormat()是不行的,前台报以下错误
  
  
  描述:
  属性或方法“_dateFormat”不在实例上定义，而是在呈现期间引用。通过初始化该属性，确保该属性是反应性的，无论是在data选项中，还是对于基于类的组件。

  是因为由于Vue不允许动态添加根级反应属性，因此必须通过预先声明所有根级反应数据属性来初始化Vue实例，所以可以通过vue的filter过滤器来初始化引入的时间格式化函数_dateFormat()