vue 封装一个全局时间戳转换为YYYY-MM-DD hh:mm:ss过滤器

需求：我们要给用户展示的时间格式是2018-06-14 08:08:08，但是后台存储使用的格式是时间戳。

第一步在vue项目的src目录下新建common文件夹，在common文件下新建一个filters文件夹，在filters文件夹下新建一个index.js文件。

（个人习惯请自行灵活操作不必死搬硬套。个人习惯把过滤器，公共方法，自定义指令等等都放在common文件下。）

index.js文件夹内容

const 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 { dateFilter}

main.js 注册成全局

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

// 全局注册

Object.keys(custom).forEach(key => { Vue.filter(key, custom[key])})

组件中使用

{{ res.date | dateFilter }} 

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

若有不解欢迎留言。