详解Vue自定义过滤器的实现

作者:袖梨 2022-06-25

    

      

{{message | sum}}

      

{{message | cal 10 20}}

      

{{message | sum | currency }}

       

      

       

    

    

     

//    -----------------------------------------华丽分割线(从model->view)---------------------------------------

      Vue.filter("sum",function(value) { //全局方法 Vue.filter() 注册一个自定义过滤器,必须放在Vue实例化前面

        returnvalue + 4;

      });

       

      Vue.filter('cal',function(value, begin, xing) { //全局方法 Vue.filter() 注册一个自定义过滤器,必须放在Vue实例化前面

        returnvalue + begin + xing;

      });

 

//    -----------------------------------------华丽分割线(从view->model)---------------------------------------

      Vue.filter("change", {

        read:function(value) {// model -> view 在更新 `` 元素之前格式化值

          returnvalue;

        },

        write:function(newVal,oldVal) {// view -> model 在写回数据之前格式化值

          console.log("newVal:"+newVal);

          console.log("oldVal:"+oldVal);

          returnnewVal;

        }

      });

 

      varmyVue =newVue({

        el:".test",

        data: {

          message:12

        }

      });

       

    

  

相关文章

精彩推荐