2018-12-15 vue时间戳转换

需求：我们要给用户展示的时间格式是2018-06-14 08:08:08，但是后台存储使用的格式是时间戳。第一步在vue项目的src目录下新建common文件夹，在common文件下新建一个filters文件夹，在filters文件夹下新建一个index.js文件。（个人习惯请自行灵活操作不必死搬硬套。个人习惯把过滤器，公共方法，自定义指令等等都放在common文件下。）

1.index.js文件夹内容

//时间戳转换
export function dateFilter(time) {
    if (!time) { // 当时间是null或者无效格式时我们返回空
        return ''
    } else {
        const date = new Date(time) // 时间戳为10位需*1000，时间戳为13位的话不需乘1000
        const dateNumFun = (num) => num < 10 ? `0${num}` : num // 使用箭头函数和三目运算以及es6字符串的简单操作。因为只有一个操作不需要{} ，目的就是数字小于10，例如9那么就加上一个0，变成09，否则就返回本身。
        // 这是es6的解构赋值。
        const [Y, M, D, h, m, s] = [
            date.getFullYear(),
            dateNumFun(date.getMonth() + 1),
            dateNumFun(date.getDate()),
            dateNumFun(date.getHours()),
            dateNumFun(date.getMinutes()),
            dateNumFun(date.getSeconds())
        ]
        return `${Y}-${M}-${D} ${h}:${m}:${s}` // 一定要注意是反引号，否则无效。
    }
}
//导出方法
export default { dateFilter }

2.main.js 注册成全局

import * as custom from '@/common/filters' // 引入我们刚刚创建的文件

// 全局注册
Object.keys(custom).forEach(key => { Vue.filter(key, custom[key])})

3.组件中使用

{{Number(updateTime) | dateFilter}}
大概就是这种效果：如果后台字段传过来时是1526634392000，过滤之后就变成了 2018-05-18 17:06:32