1. 程式人生 > >Vue 全域性過濾器、區域性過濾器的載入-0921

Vue 全域性過濾器、區域性過濾器的載入-0921

注意:
1、版本相容性問題
<script src="https://cdn.bootcss.com/axios/0.17.0/axios.min.js"></script> 
<script src="https://cdn.bootcss.com/vue/2.5.15/vue.min.js"></script>

2、過濾器的傳參問題
filterDiscount(50)|filterMyCurrency('¥')



--------------------------------------------------------------------------------------------
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Vue 過濾器</title>
    <script src="https://cdn.bootcss.com/axios/0.17.0/axios.min.js"></script>
    <script src="https://cdn.bootcss.com/vue/2.5.15/vue.min.js"></script>
    <!--<script src="js/vue.js"></script>-->

    <script>
       //得到當前時間
       // function getCureentTime_Js() {
       //     var myDate = new Date();
       //     return myDate.getHours()+":"+ myDate.getMinutes() +":"+ myDate.getSeconds()+"."+ myDate.getMilliseconds();
       // }
    </script>

</head>
<body>

   <div id="div1">
       <fieldset>
           <legend>Vue全域性過濾器、區域性過濾器</legend>
           <h3>{{msg|vueFilter_quanju1|vueFilter_quanju2|}}</h3><br>
           msg:<input type="text" v-model="msg">
       </fieldset>

       <fieldset>
           <legend>水果展示</legend>

           <table border="1px">
               <thead>
                 <tr>
                     <th>行號</th>
                     <th>名稱</th>
                     <th>單價</th>
                     <th>數量</th>
                 </tr>

               </thead>

               <tbody>
                 <tr v-for="(item,index) in goodsList">
                     <td>{{index+1}}</td>
                     <td>{{item.name}}</td>
                     <td>{{item.price|filterDiscount(50)|filterMyCurrency('¥')}}</td>
                     <td>{{item.goodsQuantity}}</td>

                 </tr>

               </tbody>

           </table>


       </fieldset>

       <div>
           <h3>{{myTime}}</h3>
           <button @click="myTime=getCureentTime()">測試</button>
       </div>

   </div>

</body>
<script>

    // 全域性過濾器
    Vue.filter("vueFilter_quanju1",function (val) {
        return "老崔前置"+val;
    });


    Vue.filter("vueFilter_quanju2",function (val) {
        return val+"後置";
    });



    var vm1= new Vue({
         el:"#div1",
         data:{
             msg:"abc",
             myTime:"123",
             goodsList:[
                 {name:"蘋果",price:123.85,goodsQuantity:128},
                 {name:"香蕉",price:128.99,goodsQuantity:56},
                 {name:"蘋果",price:128.00,goodsQuantity:8},
             ],
         },

        // //區域性過濾器
        filters:{
            filterDiscount:function (discountRate,val) {
                return (val*discountRate/100).toFixed(2);
            },
            filterMyCurrency:function (money,arg1) {
                let result = arg1 + money;
                return result;
            } ,
        },





        methods:{
            getCureentTime:function(){
                let myDate = new Date();

                let mm = myDate.getMinutes();
                if  (mm.length<2){
                    mm = "0"+ss;
                }

                let ss = myDate.getSeconds();
                if  (ss.length<2){
                    ss = "0"+ss;
                }

                let hm= myDate.getMilliseconds()+1000;
                hm = ""+hm;
                zzz = hm.substr(1,3);

                return myDate.getHours()+":" + mm +":"+ ss +"."+ zzz;
            }
        },


        created:function () {
            console.log("created"+ this.getCureentTime());

        },

        beforeCreate:function () {
            console.log("beforeCreate");
        },


        beforeUpdate:function () {
            console.log("beforeUpdate:"+ this.getCureentTime());
        },

        updated:function(){
            console.log("updated:"+ this.getCureentTime());
        },


        mounted:function () {
            console.log("mounted:"+ this.getCureentTime());

            axios.interceptors.request.use(function () {
               console.log("成功:被攔截了。。。");
            },function (error) {
               console.log("執行錯誤!");
               return Promise.reject(error);
                }
            );
        },


        beforeMount:function () {
            console.log("beforeMount:"+ this.getCureentTime());
        },



    });

   


</script>
</html>