filters传参是什么_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是传递过来的参数
UpperCase() //操作之后将结果返回出去
},
filterTwo(val,unit) {
//此处val是经过上⼀个过滤器filterOne操作之后的返回的结果，unit是参进来的参数
return val+unit
}
}
filter过滤对象数组vue过滤器补充
1、vue 过滤器不仅可以⽤在{{}}⾥⾯，也可以⽤在vue的⽣命周期中
例如在methods的⽅法中使⽤：
this.$options.filters ['filterOne'] ('LiLi') // []⾥⾯是过滤器名 ，()⾥⾯是 参数
2、vue过滤器还可以接收函数作为参数，如下：
this.$options.filters ['filterOne'] ('LiLi'，this.fun('⼩明'))

版权声明：本站内容均来自互联网，仅供演示用，请勿用于商业和其他非法用途。如果侵犯了您的权益请与我们联系QQ:729038198，我们将在24小时内删除。