过滤器(filter)

什么是过滤器:专门对变量的原始值进行加工后再显示出来的一种特殊函数
为什么:有些时候,变量的原始值,不能直接看!看不懂,所以需要先将原始值加工成能看懂的内容,在显示出来,比如:性别: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>