vue脚手架项目,过滤器filter的使用且在js中的使用

过滤器:将原数据进行逻辑处理,再返回的新数据

一:全局过滤器

1：在main.js里定义:

 

Vue.filter("定义的过滤器名字", function(val) {
  return val + "aa";    //数据处理逻辑
});

2:在需要处理数据的地方调用自定义过滤器

<div>{{msg|自定义的过滤器名字}}

二:局部过滤器,

1：在组件中,定义在于data同级别处,

filters:{

    过滤器名称(val){

        return  val+"aa"
            
                    }
                }

2:在需要处理数据的地方调用自定义过滤器

<div>{{msg|自定义的过滤器名字}}

 

 延伸：

val为用来接收传入的数据, 即val===msg,       val+"aa" 为假设需要处理的数据逻辑,

另外:过滤器也可级联使用:

<div>{{msg | 自定义的过滤器名字a | 自定义的过滤器名字b }}

过滤器传参:a对应a1,b对应b1...

<div>{{msg | 自定义的过滤器名字(a,b,c...) }}

Vue.filter("定义的过滤器名字", function(val,a1,b1,c1...) {
  return val + "aa";
});

补充：过滤器在js中使用(!!!多次这样调用时建议定义全局 let that = this;这样使用)

 this.$options.filters["thousand"](要处理的数据)