- 什么是过滤器:专门对变量的原始值进行加工后再显示出来的一种特殊函数
- 为什么:有些时候,变量的原始值,不能直接看!看不懂,所以需要先将原始值加工成能看懂的内容,在显示出来,比如:性别:1和0,时间毫秒数
- 何时:今后要显示的变量原始值不能直接看,需要加工时,就用过滤器
- 如何:2步
(1).定义过滤器:
Vue.filter("过滤器名",function(value){
return 过滤后的新值
})
(2).在页面上使用过滤器:
比如:在绑定语法的{{}}中使用:
<元素>{{变量 | 过滤器}}</元素> | 连接的意思
5.结果:
(1).new Vue()扫描到绑定语法中的|,就会去Vue家赵有没有指定名称的过滤器函数
(2)如果找到指定名称的过滤器函数,则自动调用过滤器函数
a.将|左边的变量的原始值自动传给过滤器函数的value形参
b.将过滤器执行的结果返回给new Vue()
(3).new Vue()会用过滤器返回的加工后的结果,代替当前{{}}语法位置,显示给用户看
6.过滤器可以传参
(1).定义过滤器:
Vue.filter("过滤器名",function(oldVal,自定义形参){
return 根据不同的自定义形参,过滤出不同的新值
})
(2).在页面上使用过滤器:
比如:在绑定语法的{{}}中使用:
<元素>{{变量 | 过滤器名(自定义实参值)}}</元素>
7.多个过滤器可以连用:
<元素>{{变量 | 过滤器1 | 过滤器2 | ...}}</元素>
强调:过滤器连用时,每个过滤器即可能接住变量的原始值,又可能接住的是上一个过滤器加工后的半成品
8.示例:使用过滤器过滤性别
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>Document</title>
<script src="js/vue.js"></script>
<script>
//定义过滤器sexFilter可将性别的1和0过滤为男和女
Vue.filter("sexFilter",function(oldVal,langage="cn"){
//如果{{sex | sexFilter}}
//则oldVal有2种可能:0和1
//langage只考虑两种情况:cn 中文,en 英文,默认 中文
if(langage=="cn"){
return oldVal==1?"男":"女"
}else{
return oldVal==1?"Male":"Female"
}
})
</script>
</head>
<body>
<div id="app">
<h1>{{sex1 | sexFilter}}</h1>
<h1>{{sex2 | sexFilter}}</h1>
<h1>{{sex1 | sexFilter("en")}}</h1>
<h1>{{sex2 | sexFilter("en")}}</h1>
</div>
<script>
var vm=new Vue({
el:"#app",
data:{
sex1:1,
sex2:0
}
})
</script>
</body>
</html>
