- 当你在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'}]
<ul>
<li v-for="item in lists" :key="item.id">{{item.name | filterOne | filterTwo('同学') }}</li>
</ul>
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('小明'))
