Vue 全域性過濾器、區域性過濾器的載入-0921
阿新 • • 發佈：2018-12-11
注意： 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>