美文网首页
Vue时间格式化

Vue时间格式化

作者: 夕月红叶酱 | 来源:发表于2019-06-19 14:29 被阅读0次

    1.html


    vue   -- > {{date || dateString}} , 第二个为过滤器的名称。 可以再过滤器中对参数进行格式化。第一个参数为传入过滤器的value,也可以显示的指定参数进行传递 


    <div id="test">

    <h2>显示格式化的日期时间</h2>

    <p>{{date}}</p>

    <p>完整版:{{date | dateString}}</p>

    <p>年月日:{{date | dateString('YYYY-MM-DD')}}</p>

    <p>时分秒:{{date | dateString('HH:mm:ss')}}</p>

    </div>

    2.JS


        使用moment.js库对时间进行格式化操作


    <script type="text/javascript" src="../js/vue.js"></script>

    <script type="text/javascript" src="https://cdn.bootcss.com/moment.js/2.24.0/moment.js"></script>

    <script>

    //自定义过滤器

      Vue.filter('dateString',function(value,format){

    return moment(value).format(format ||'YYYY-MM-DD HH:mm:ss')//对指定事件进行格式化

      })

    new Vue({

    el:"#test",

    data:{

    date:new Date(),

    }

    })

    </script>

    相关文章

      网友评论

          本文标题:Vue时间格式化

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