美文网首页
Vue日期格式化与过滤器

Vue日期格式化与过滤器

作者: 九瀺 | 来源:发表于2019-09-29 02:55 被阅读0次
<body>
   <div id="app">
        <p>{{date}}</p>
        <p>完整版:{{date | dateToStr }}</p>
        <p>年月日:{{date | dateToStr("YYYY-MM-DD") }}</p>
        <p>时分秒:{{date | dateToStr("hh:mm:ss") }}</p>       
   </div>
    <script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
    <!-- moment时间格式化库 -->
    <script src="https://cdnjs.cloudflare.com/ajax/libs/moment.js/2.24.0/moment.min.js"></script>
    <script>
        //自定义过滤器
        // Vue.filter('dateToStr',function (value,format) {
        //     return moment(value).format(format || "YYYY-MM-DD hh:mm:ss")
        //  })
         Vue.filter('dateToStr',function (value,format="YYYY-MM-DD hh:mm:ss") { //利用ES6形参默认值
            return moment(value).format(format )
         })
        new Vue({
            el:"#app",
            data:{
                date : new Date()
            }
        })
    </script>
</body>

自定义过滤器格式化时间格式(用到了moment.js 库

相关文章

网友评论

      本文标题:Vue日期格式化与过滤器

      本文链接:https://www.haomeiwen.com/subject/kgpxpctx.html