萌新VueDay5——Vue日期（Date)

萌新VueDay5——Vue日期（Date)

日期：Wed Jan 01 2020 15:23:21 GMT+0800 (中国标准时间)

<div id="test">
    <p>日期：{{date}}</p>
</div>

new Vue({
        el:'#test',
        data:{
            date:new Date()
        }
    })

借助Moment.js实现
日期：2020-01-01 15:52:05

<div id="test">
    <p>日期：{{date | newdate}}</p>
</div>

<script src="../js/vue.js"></script>
<script src="https://cdn.bootcss.com/moment.js/2.24.0/moment.js"></script>
<script>
    //此处vue作为一个函数使用
    Vue.filter('newdate',(value)=>{
        return moment(value).format('YYYY-MM-DD HH:mm:ss')
    })
    new Vue({
        el:'#test',
        data:{
            date:new Date()
        }
    })
</script>

再深入通过同一个函数，实现只需年月或者只要分秒的操作

日期：2020-01-01

日期：15:57:05

加入一个函数变量

<div id="test">
    <p>日期：{{date | newdate('YYYY-MM-DD')}}</p>
    <p>日期：{{date | newdate('HH:mm:ss')}}</p>
</div>

<script src="../js/vue.js"></script>
<script src="https://cdn.bootcss.com/moment.js/2.24.0/moment.js"></script>
<script>
    //此处vue作为一个函数使用
    Vue.filter('newdate',(value,format)=>{
        return moment(value).format(format || 'YYYY-MM-DD HH:mm:ss')
    })
    new Vue({
        el:'#test',
        data:{
            date:new Date()
        }
    })
</script>