Vue框架之過濾器

◆ 過濾器：

• Vue.js允許自定義過濾器，可被用於一些常見的文本格式化。
• 過濾器可以用在兩個地方：雙花括號插值和v-bind表達式。
• 過濾器應該被添加在JavaScript表達式的尾部，由“管道”符號指示
• 支持級聯操作
• 過濾器不改變真正的data，而只是改變渲染的結果，並返回過濾後的版本
• 全局註冊時是filter，沒有s的。而局部過濾器是filters，是有s的

 <div id="app">
    <input type="text" v-model='msg'>
      <!-- upper 被定義爲接收單個參數的過濾器函數，表達式  msg  的值將作爲參數傳入到函數中 -->
    <div>{{msg | upper}}</div>
    <!--  
      支持級聯操作
      upper  被定義爲接收單個參數的過濾器函數，表達式msg 的值將作爲參數傳入到函數中。
	  然後繼續調用同樣被定義爲接收單個參數的過濾器 lower ，將upper 的結果傳遞到lower中
 	-->
    <div>{{msg | upper | lower}}</div>
    <div :abc='msg | upper'>測試數據</div>
  </div>

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

◆ 過濾器中傳遞參數：

    <div id="box">
        <!--
			filterA 被定義爲接收三個參數的過濾器函數。
  			其中 message 的值作爲第一個參數，
			普通字符串 'arg1' 作爲第二個參數，表達式 arg2 的值作爲第三個參數。
		-->
        {{ message | filterA('arg1', 'arg2') }}
    </div>
    <script>
        // 在過濾器中 第一個參數 對應的是  管道符前面的數據   n  此時對應 message
        // 第2個參數  a 對應 實參  arg1 字符串
        // 第3個參數  b 對應 實參  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>