vue过滤器--格式化时间

格式化时间

使用vue过滤器 : 全局过滤器 或局部过滤器

操作时间 : 手动操作 使用moment.js操作

使用全局过滤器

自己操作时间

Vue.filter('dateMy',(msg,pat = 'yyyy-mm-dd') => {
    //addZero函数 封装了填充0的操作
    //padStart 是ES5中 填充字符串  str.padStart(填充后的长度,填充的内容)
    function addZero(msg){
        return msg.toString().padStart(2,'0')
    }
    //处理时间戳,如果传入的是时间戳转成标准时间
    msg = new Date(msg)
    let y = msg.getFullYear()
    let m = addZero(msg.getMonth()+1)
    let da = addZero(msg.getDate())
    let h = addZero(msg.getHours())
    let s = addZero(msg.getSeconds())
    let mi = addZero(msg.getMinutes())
    //处理传的时间格式大小写混乱
    if(pat && pat.toLowerCase('yyyy-mm-dd')){
        return `${y}-${m}-${da}`
    }else{
        //处理 : 没有传参 
        return `${y}-${m}-${da} ${h}:${s}:${mi}`

    }
})

使用局部过滤器

使用 第三方moment.js来操作时间

const vm = new Vue({
    el:'#app',
    data:{
        msg:new Date(),
    },
    //局部过滤器
    filters:{
        dateMoment(msg , pat = 'YYYY-MM-DD'){
            return moment(msg).format(pat)
        }
    }
})

调用

 <div id="app">    
     <h1>{{msg | dateMy}}</h1>
     <h1>{{msg | dateMoment}}</h1>
</div>