Vue.js时间格式化处理

1.首先在vue项目中安装moment

npm install moment --save

2. 定义时间格式化全局过滤器，在dateUtil.js中或组件中导入该组件

import moment from 'moment'

dateUtil.js代码：

import moment from "moment";

function dateFormat(data) {

    return moment(new Date(data).getTime()).format('YYYY-MM-DD HH:mm');;

}

export {

    dateFormat

}

3. 使用方法一

3.1在全局中定义时间格式化

// 定义一个全局过滤器实现日期格式化

Vue.filter('datefmt', function (input, fmtstring) {

  return moment.unix(input).format(fmtstring)

})

3.2在main.js中或组件中导入该组件

import moment from 'moment'

这样就可以在我们需要对时间进行格式化的组件中进行使用了，如下：

    {{item.publishdate | datefmt('MM/DD')}}

    {{item.publishdate | datefmt('YYYY')}}

这里我有两个span标签，第一个是将时间戳格式为 月/日（11/24） 这样的格式，第二个则是格式化为年份值（如2018这样的）

4.使用用法二：

如果我们项目所需的格式都是统一格式的（例如都显示为2018-09-06），那么可以在main.js中进行统一格式样式的设置，如下：

Vue.filter('datefmt', function (input, 'YYYY-MM-DD') {

  return moment.unix(input).format('YYYY-MM-DD')

})

然后在组件中这样使用即可

{{item.publishdate | datefmt}}

5.使用用法三

const data  =  moment(时间戳).format('YYYY-MM-DD HH:mm:ss')

console.log(data)   //    "2019-05-25 08:23:56"

6.时间转时间戳

直接把字符串传到Date对象里他会帮你转成时间的

var timeStr1 = '2018/08/08';



var timeStr2 = '2018/12/12';



var time1 = new Date(timeStr1).getTime();



var time2 = new Date(timeStr2).getTime();



console.log(time1 )  //   1558972800000

7．由于后台传到前台的数据是字符串类型，所以我们现将时间字符串转化为时间戳，再把时间戳转为自己想要的格式

7.1创建一个通用工具类dateUtil.js代码：

import moment from "moment";

function dateFormat(data) {

    return moment(new Date(data).getTime()).format('YYYY-MM-DD HH:mm');;

}

export {

    dateFormat

}

7.2然后在组件中引入dateUtil.js

import { dateFormat } from '../utils/dateUtil';

7.3在methods方法中定义该js名称。

methods: {

        // 加载用户分页数据

        dateFormat,

…………

…………

7.4在需要格式化时，直接将后台传过来的对象遍历得到时间，将时间传到该方法中即可：

 this.tableData = resp.data.data.list;

      for(let i = 0; i < this.tableData.length; i++) {

            this.tableData[i].updateTime = this.dateFormat(this.tableData[i].updateTime)

      }