VUE中日期格式化工具（moment && date_fns)的使用 以及自定义日期格式化

方法1：vue中使用moment（全局过滤器）

 // 下载 moment
 npm install moment --save 
 cnpm install moment --save

 // 在（main.js)中全局引入 
     import Vue from 'vue'
     import moment from 'moment'

//  全局过滤器 时间戳 
     Vue.filter('date-format',function(value,formatStr='YYYY-MM-DD HH:mm:ss'){
        return moment(value).format(formatStr)
    }
)
//在页面中过滤 如：
    <div>{{time | data-format}}</div>

方法2：date_fns的使用：

安装date-fns
    npm install --save date-fns

在main.js中引入 
    import format from 'date-fns'; //只引入了日期格式化

// 定义全局过滤器 时间戳 
     Vue.filter('date-format',function(value,formatStr='YYYY-MM-DD HH:mm:ss'){
        return format(value,formatStr)
    }
)

在页面中使用 如:
     <div>{{time | data-format}}</div>

方法3：我们也可以自己封装一个日期格式化的工具 代码如下：

直接复制就可以使用

//自定义日期格式过滤器 
Vue.filter('date-format',function(value){
    const dt=new Date(value)
    const y=dt.getFullYear()
//padStart是字符串自动补全头部长度功能 
//一共接受两个参数，第一个参数用来指定字符串的最小长度，第二个参数是用来补全的字符串。
    const m=(dt.getMonth()+1+'').padStart(2,'0')
    const d=(dt.getDate()+'').padStart(2,'0')
    const hh=(dt.getHours()+'').padStart(2,'0')
    const mm=(dt.getMinutes()+'').padStart(2,'0')
    const ss=(dt.getSeconds()+'').padStart(2,'0')
    return `${y}-${m}-${d} ${hh}:${mm}:${ss}`
})


//在页面中使用 如：
   <div>{{time | data-format}}</div>