大家好，又见面了，我是你们的朋友全栈君。
vue filters 是什么？
首先：filter翻译成中文是过滤器的意思。
而在Vue中作用其实就是对字段进行预处理
怎么使用呢？
就用一个小Demo,讲解一下！
目的：对字段进行处理，打印出“Hello world!!!”
首先,打印出“Helle”
<template>
<view>
{
{demo}}
</view>
</template>
<script>
export default {
data() {
return {
demo: 'Hello'
}
},
onLoad() {
},
methods: {
}
}
</script>
<style>
</style>
结果在页面上打印出了：
接下来，添加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:
页面代码：
<view v-for="(item,index) in userArray" v-bind:key="index">
姓名:{
{item.name}} 性别：{
{item.gender}}
</view>
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,这样处理：
页面代码：
<view v-for="(item,index) in userArray" v-bind:key="index">
姓名:{
{item.name }} 性别：{
{item.gender | genderZH}}
</view>
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是一样的。
这里就不示例了，感兴趣的可以自己动手写一写！
完整代码如下：
<template>
<view>
<!-- 不用filters -->
<!-- <view v-for="(item,index) in userArray" v-bind:key="index">
姓名:{
{item.name}} 性别：{
{item.gender}}
</view> -->
<view v-for="(item,index) in userArray" v-bind:key="index">
姓名:{
{item.name }} 性别：{
{item.gender | genderZH}}
</view>
</view>
</template>
<script>
export default {
data() {
return {
userArray: [
{name:"张三",gender:1},
{name:"李四",gender:2},
{name:"王五",gender:0},
{name:"赵六",gender:2}
]
}
},
filters:{
genderZH(gender){
switch(gender){
case 0:
gender = "未知"
break
case 1:
gender = "男"
break
case 2:
gender = "女"
break
default:
gender = "未知"
break
}
return gender
}
},
onLoad() {
//不用filters
// 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
// }
// })
},
methods: {
}
}
</script>
<style>
</style>
end!!!
发布者：全栈程序员-用户IM，转载请注明出处：https://javaforall.cn/143460.html原文链接：https://javaforall.cn
【正版授权，激活自己账号】： Jetbrains全家桶Ide使用，1年售后保障，每天仅需1毛
【官方授权 正版激活】： 官方授权 正版激活 支持Jetbrains家族下所有IDE 使用个人JB账号...
