過(guò)濾器

• Vue.js允許自定義過(guò)濾器，可被用于一些常見(jiàn)的文本格式化。
• 過(guò)濾器可以用在兩個(gè)地方：雙花括號(hào)插值和v-bind表達(dá)式。
• 過(guò)濾器應(yīng)該被添加在JavaScript表達(dá)式的尾部，由“管道”符號(hào)指示
• 支持級(jí)聯(lián)操作
• 過(guò)濾器不改變真正的data，而只是改變渲染的結(jié)果，并返回過(guò)濾后的版本
• 全局注冊(cè)時(shí)是filter，沒(méi)有s的。而局部過(guò)濾器是filters，是有s的

  <div id="app">
    <input type="text" v-model='msg'>
      <!-- upper 被定義為接收單個(gè)參數(shù)的過(guò)濾器函數(shù)，表達(dá)式  msg  的值將作為參數(shù)傳入到函數(shù)中 -->
    <div>{{msg | upper}}</div>
    <!--  
      支持級(jí)聯(lián)操作
      upper  被定義為接收單個(gè)參數(shù)的過(guò)濾器函數(shù)，表達(dá)式msg 的值將作為參數(shù)傳入到函數(shù)中。
      然后繼續(xù)調(diào)用同樣被定義為接收單個(gè)參數(shù)的過(guò)濾器 lower ，將upper 的結(jié)果傳遞到lower中
    -->
    <div>{{msg | upper | lower}}</div>
    <div :abc='msg | upper'>測(cè)試數(shù)據(jù)</div>
  </div>

<script type="text/javascript">
   //  lower  為全局過(guò)濾器     
   Vue.filter('lower', function(val) {
      return val.charAt(0).toLowerCase() + val.slice(1);
    });
    var vm = new Vue({
      el: '#app',
      data: {
        msg: ''
      },
       //filters  屬性 定義 和 data 已經(jīng) methods 平級(jí) 
       //  定義filters 中的過(guò)濾器為局部過(guò)濾器 
      filters: {
        //   upper  自定義的過(guò)濾器名字 
        //    upper 被定義為接收單個(gè)參數(shù)的過(guò)濾器函數(shù)，表達(dá)式  msg  的值將作為參數(shù)傳入到函數(shù)中
        upper: function(val) {
         //  過(guò)濾器中一定要有返回值 這樣外界使用過(guò)濾器的時(shí)候才能拿到結(jié)果
          return val.charAt(0).toUpperCase() + val.slice(1);
        }
      }
    });
  </script>

過(guò)濾器中傳遞參數(shù)

    <div id="box">
        <!--
            filterA 被定義為接收三個(gè)參數(shù)的過(guò)濾器函數(shù)。
            其中 message 的值作為第一個(gè)參數(shù)，
            普通字符串 'arg1' 作為第二個(gè)參數(shù)，表達(dá)式 arg2 的值作為第三個(gè)參數(shù)。
        -->
        {{ message | filterA('arg1', 'arg2') }}
    </div>
    <script>
        // 在過(guò)濾器中 第一個(gè)參數(shù) 對(duì)應(yīng)的是  管道符前面的數(shù)據(jù)   n  此時(shí)對(duì)應(yīng) message
        // 第2個(gè)參數(shù)  a 對(duì)應(yīng) 實(shí)參  arg1 字符串
        // 第3個(gè)參數(shù)  b 對(duì)應(yīng) 實(shí)參  arg2 字符串
        Vue.filter('filterA',function(n,a,b){
            if(n<10){
                return n+a;
            }else{
                return n+b;
            }
        });
        
        new Vue({
            el:"#box",
            data:{
                message: "哈哈哈"
            }
        })

    </script>