Vue 全局过滤器、局部过滤器的加载-0921

最新推荐文章于 2024-09-21 18:28:59 发布

Golden_soft

最新推荐文章于 2024-09-21 18:28:59 发布

阅读量315

点赞数

分类专栏： Vue 文章标签： Vue 过滤器

本文链接：https://blog.csdn.net/Golden_soft/article/details/82805951

版权

Vue 专栏收录该内容

27 篇文章 0 订阅

订阅专栏

注意：
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>