vuefilters是什么？怎么使用？

vue filters 是什么？

首先：filter翻译成中文是过滤器的意思。
而在Vue中作用其实就是对字段进行预处理

怎么使用呢？

就用一个小Demo,讲解一下！
目的：对字段进行处理，打印出“Hello world!!!”
首先,打印出“Helle”

结果在页面上打印出了：

接下来，添加filters，把“world”添加上去：

filters:{
sayHello(demo){
return demo+" world!!!"
}
},


最后调用filters方法：

{
{demo | sayHello}}


页面上就打印出我们想要的“Hello world!!!”

实现很easy！

那么什么情况下会用到呢？

如果像demo这样使用，有点多此一举的感觉！！（确实）
实际项目中，常常会遇到这种array，如:

userArray: [
{name:"张三",gender:1},
{name:"李四",gender:2},
{name:"王五",gender:0},
{name:"赵六",gender:2}
]


这里的gender,需要按1：男，2：女，0：未知 显示在最终的页面上。
如果不用filters,需要循环处理下userArray:

页面代码：


姓名:{
{item.name}} 性别：{
{item.gender}}



js代码

this.userArray.forEach(item=>{
switch(item.gender){
case 0:
item.gender = "未知"
break
case 1:
item.gender = "男"
break
case 2:
item.gender = "女"
break
default:
item.gender = "未知"
break
}
})


而用filters,这样处理：
页面代码：


姓名:{
{item.name }} 性别：{
{item.gender | genderZH}}



js代码：

filters:{
genderZH(gender){
switch(gender){
case 0:
gender = "未知"
break
case 1:
gender = "男"
break
case 2:
gender = "女"
break
default:
gender = "未知"
break
}
return gender
}
}


最终的效果：

好像这么做，区别也不是很大啊？
那么，如果现在有studentArray，teacherArray 两个array呢？或者更多呢？
如果不用filters，是不是有多少个array就得写多少个forEach方法
而用filters,多个array跟一个array是一样的。
这里就不示例了，感兴趣的可以自己动手写一写！
完整代码如下：

end!!!