vue过滤器filter的使用

vue允许自定义过滤器，我们通常用于对文本进行格式化一类的操作。如：将返回值 ‘abc’ 设置为 ‘ABC’ 显示在页面中；又或者，如果返回值为 ‘a’ 页面显示 ‘张三’，返回值为 ‘b’ 页面显示 ‘李四’。总之，对当前文本的各种操作，几乎都可以用filter来解决。

注意：过滤器仅可以在两个地方使用：1、花括号中；2、v-bind中；

// 在花括号中使用{{ message | msgFilter }}// 在v-bind中使用

一、全局过滤器

vue项目中创建全局过滤器：在main.js中注册全局过滤器，且必须放在vue实例创建之前。然后才可以在各个组件中使用。

//main.jsVue.filter('filter1',function(value){return value.chartAt(0).toUpperCase()+value.slice(1)})new Vue({//.......})

二、局部过滤器

局部过滤器，在组件中定义，与data，created，methods等同级。

filters：{filter1：function(value){return value.chartAt(0).toUpperCase()+value.slice(1)}}

三、多个过滤器串联

我们在应用中，可以依次使用两个或多个过滤器，每个过滤器的参数为上一次过滤器返回的结果。

 {{ message | filter1 | filter2 }} 

在以上例子中，有两个过滤器 filter1 和 filter2。首先会将 message 传入 filter1 中进行第一次处理，然后再将 filter1 的处理结果，传递到 filter2 中进行第二次处理，最终，将filter2的处理结果渲染到页面中。

四、过滤器添加参数

过滤器同样是一个js函数，因此可以添加参数。

 {{ message | filter1('param1','param2') }} 

如上所示，filter1 有一个默认参数 message ，我们自定义添加了两个参数 ‘param1’ 和 ‘param2’，此时，在实际的过滤器函数中一共接收到三个参数：message，’param1’，’param2’；

filters：{filter1：function(value,value1,value2){console.log(value) // message变量的值console.log(value1)// param1console.log(value2)// param2}}

五、过滤器 this 指向问题

filter过滤器中的this指向，并不是vue中的this，而是undefined；

因此，如果我们想要获取data中的数据，有两种方法：1、改变this指向；2、传参；

1、改变this 指向

 {{ fileObj | typeFilter}} let that;export default {data(){return{fileObj:{type:'file'},classObj:{file:'file-img'}}},beforeCreate(){that = this;},filters:{typeFilter:function(obj){console.log(that.classObj)}}}

2、传参

 {{ fileObj | typeFilter(classObj) }} export default {data(){return{fileObj:{type:'file'},classObj:{file:'file-img'}}},filters:{typeFilter:function(obj,classObj){console.log(obj)console.log(classObj)}}}