filters的实现

当你在v-for循环渲染一个数组对象的时候，是否遇到过这样的问题，对象里面的字段并不是直接渲染在页面上，而是需要经过数据处理才最终展示在页面上。

  1. 在通过接口获取到数据后，我们可以通过map函数先进行数据处理，再展示到页面上
  2. 利用vue提供的filters钩子函数，实现数据的过滤处理再渲染处理过后的内容

下面谈一下方式二怎么实现：

  1. html代码中，{{}}中实现filters的顺序是{{参数｜filter函数 ｜filter函数｜…}},后面可以有多个filters函数，前面filters函数返回的结果是后面一个filters函数的参数，并且可以在过滤函数后面加上()里面加上的其他的参数。
  2. 创建过滤函数，并且在接收传递过来的参数，其中操作链的参数都作为第一个参数接收，其余参数一次排列在后面，如filter（val，unit）
    1. // lists数组为：lists =[{id:1,name:'Seven'},{id:2,name:'Jack Jones'}]
    2. <ul>
    3.  <li v-for="item in lists" :key="item.id">{{item.name | filterOne | filterTwo('同学') }}</li>
    4. </ul>
    1. filters:{ //钩子
    2.  filterOne(val){  //过滤器函数的名字filterOne，val是传递过来的参数
    3.    return val.toUpperCase()  //操作之后将结果返回出去
    4.  },
    5.  filterTwo(val,unit) {
    6.     //此处val是经过上一个过滤器filterOne操作之后的返回的结果，unit是参进来的参数
    7.    return val+unit
    8.  }
    9. }

vue过滤器补充

  1. filters不仅可以在模版语法中使用，也可以用在vue的生命周期中。

例如在methods的方法中使用：
this.$options.filters [‘filterOne’] (‘LiLi’) // []里面是过滤器名 ，（）里面是 参数

  1. filters还可以接收函数作为参数，如下：

this.$options.filters [‘filterOne’] (‘LiLi’，this.fun(‘小明’))