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>

免責聲明！

本站轉載的文章為個人學習借鑒使用，本站對版權不負任何法律責任。如果侵犯了您的隱私權益，請聯系本站郵箱yoyou2525@163.com刪除。

猜您在找 vue 日期格式化過濾器 django 過濾器、日期格式化參數 django過濾器，日期格式化 django 過濾器、日期格式化參數 vue-cli項目中使用全局過濾器及傳參(日期格式化) Vue 使用dayjs結合filter過濾器格式化日期 vue 添加過濾器-以格式化日期為例 vue 金額格式化 ---過濾器 Vue element el-table-column標簽中對日期進行格式化（全局過濾器） Vue element el-table-column標簽中對日期進行格式化（全局過濾器）