vue过滤器filters的使用

• 当你在v-for循环渲染一个数组对象的时候，是否遇到过这样的问题：对象里面的字段并不是直接渲染在页面中，而是需要把数据处理过后的内容显示在页面上。

方法一：在接口获取到数据的时候，利用数组方法map先处理数据，再直接渲染
方法二：利用vue提供的filters钩子，实现数据的过滤处理再渲染处理过后的内容。

下面说下方法二怎么实现：
1、html代码中，{{}}中实现filters顺序是 {{参数 | filters函数 | filters函数 | ...}},
| 后面可以多个filters函数，前面filters函数return的结果是后面filters函数的参数。
并且可以在过滤函数后面加上（）里面加上其他的参数。如下 filterTwo('同学')

// lists数组为：lists =[{id:1,name:'Seven'},{id:2,name:'Jack Jones'}]
 

    
{{item.name | filterOne | filterTwo('同学') }}
  

2、创建过滤函数，并且接收传递过来的参数，其中操作链中的参数都作为第一个参数接收，其余参数一次排列在后。如下 filterTwo(val,unit)

filters:{ //钩子
    filterOne(val){  //过滤器函数的名字filterOne，val是传递过来的参数
      return val.toUpperCase()  //操作之后将结果返回出去
    },
    filterTwo(val,unit) {
       //此处val是经过上一个过滤器filterOne操作之后的返回的结果，unit是参进来的参数
      return val+unit
    }
  }

3、过滤器操作完成，页面渲染结果如下：
(https://upload-images.jianshu.io/upload_images/19115814-6279df42a99a1823.png?imageMogr2/auto-orient/strip%7CimageView2/2/w/1240)

• vue过滤器补充
  1、vue 过滤器不仅可以用在{{}}里面，也可以用在vue的生命周期中
  例如在methods的方法中使用：
  this.$options.filters ['filterOne'] ('LiLi') // []里面是过滤器名 ，（）里面是 参数

  2、vue过滤器还可以接收函数作为参数，如下：
  this.$options.filters ['filterOne'] ('LiLi'，this.fun('小明'))