码迷,mamicode.com
首页 > 其他好文 > 详细

VUE:过滤器及日期格式化moment库

时间:2018-11-15 01:40:48      阅读:280      评论:0      收藏:0      [点我收藏+]

标签:code   过滤   一个   text   javascrip   span   style   title   完整版   

VUE:过滤器及日期格式化moment库

<!DOCTYPE html>
<html>
    <head>
        <meta charset="UTF-8">
        <title>11_过滤器</title>
    </head>
    <body>
        <!--
            1)定义过滤器
                Vue.filter(filterName,function(value[arg1,arg2,...])){
                    //进行一定的数组处理
                    return newValue
                }
            2)使用过滤器
                <div>{{myData | filterName}}</div>
                <div>{{myData | filterName{arg}}}</div>
        -->
        <!--   需求:对当前时间进行指定格式显示     -->
        <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>
        
        <script type="text/javascript" src="../js/vue.js" ></script>
        <!--    moment日期格式化的库:地址:momentjs.cn        -->
        <script type="text/javascript" src="https://cdn.bootcss.com/moment.js/2.21.0/moment.js"></script>
        <script>
            //自定义过滤器
            //思考:函数对象(Vue为一个函数,作为对象来使用)
//          Vue.filter(‘dateString‘,function(value,format){
//              return moment(value).format(format||‘YYYY-MM-DD HH:mm:ss‘)
//          })
            
            //也可以用形参默认值
            Vue.filter(dateString,function(value,format=YYYY-MM-DD HH:mm:ss){
                return moment(value).format(format)
            })
            
            new Vue({
                el:#test,
                data:{
                    date:new Date()
                }
            })
        </script>
    </body>
</html>

 

VUE:过滤器及日期格式化moment库

标签:code   过滤   一个   text   javascrip   span   style   title   完整版   

原文地址:https://www.cnblogs.com/it-taosir/p/9961184.html

(0)
(0)
   
举报
评论 一句话评论(0
登录后才能评论!
© 2014 mamicode.com 版权所有  联系我们:gaon5@hotmail.com
迷上了代码!