过滤器常用户来处理文本格式化的操作 过滤器还可以用在两个地方：花括号和v-bind 表达式
1.全局过滤器
{{user.gender|gfilter}}
Vue.filter("gfilter",function (val) {
if (val == 1) {
return "男...";
} else {
return "女...";
}
})
2.局部过滤器
new Vue({
el: "#app",
data: {
users: [{ id: 1, name: "wanghaha1", gender: 1 },
{ id: 2, name: "wanghaha2", gender: 0 }]
},
filters: { //此为局部过滤器
genderfilter(val) {
if (val == 1) {
return "男";
} else {
return "女";
}
}
}
})
例子：
1 <!DOCTYPE html> 2 <html lang="en"> 3 4 <head> 5 <meta charset="UTF-8"> 6 <meta name="viewport" content="width=device-width, initial-scale=1.0"> 7 <title>Document</title> 8 </head> 9 10 <body> 11 <script src="../node_modules/vue/dist/vue.js"></script> 12 <!--过滤器常用户来处理文本格式化的操作 过滤器还可以用在两个地方：花括号查之和v-bind 表达式--> 13 <div id="app"> 14 <ul> 15 <li v-for="user in users"> 16 {{user.id}} ==> {{user.name}} ==> {{user.gender==1?"男":"女"}} 17 {{user.gender|genderfilter}} 18 {{user.gender|gfilter}} 19 </li> 20 </ul> 21 </div> 22 <script> 23 24 Vue.filter("gfilter",function (val) { 25 if (val == 1) { 26 return "男..."; 27 } else { 28 return "女..."; 29 } 30 }) 31 32 33 let vm = new Vue({ 34 el: "#app", 35 data: { 36 users: [{ id: 1, name: "wanghaha1", gender: 1 }, 37 { id: 2, name: "wanghaha2", gender: 0 }] 38 }, 39 filters: { //此为局部过滤器 40 genderfilter(val) { 41 if (val == 1) { 42 return "男"; 43 } else { 44 return "女"; 45 } 46 } 47 } 48 }) 49 50 51 52 </script> 53 </body> 54 55 </html>