0四、Vue.js---自定義過濾器

時間 2019-11-18

原文原文鏈接

自定義過濾器的關鍵字是 filter。javascript

官網描述：Vue.js 容許你自定義過濾器，可被用於一些常見的文本格式化。過濾器能夠用在兩個地方：雙花括號插值和 v-bind 表達式 (後者從 2.1.0+ 開始支持)。過濾器應該被添加在 JavaScript 表達式的尾部，由「管道」符號指示：html

<!-- 在雙花括號中 -->

{{ message | capitalize }}

<!-- 在 `v-bind` 中 -->

<div v-bind:id="rawId | formatId"></div>

官網中提到的管道的關鍵字是「|」，其格式是：{{ data | fun }}。java

自定義過濾器的做用：在數據顯示以前，對數據進行處理包裝。過濾器也分爲全局過濾器（filter）和局部過濾器(filters)。具體用法見代碼及註釋部分：api

js代碼部分：app

window.onload = function (){
  // 定義全局過濾器
  Vue.filter("test",function(data){
    // 形參data的實參是管道{{ data | fun }}中 data
    return data >=10;
  });
  new Vue({
    el:"#app",
    data:{
      num:0,
      today:new Date()
    },
    // 定義局部過濾器
    filters:{
      // 定義局部過濾器，將覺得數字前補0，其餘的原樣輸出
      addZero:function(data){
        return data>=10 ? data : "0"+data;
      },
      // 過濾器帶多個參數
      dateFormat:function(data,arg1,arg2){
        // 能夠打印 arg1/arg2 看看結果
        // console.log(arg1);
        // console.log(arg2);
        let year = data.getFullYear();
        let m = data.getMonth()+1;
        let day = data.getDate();

        return year+arg1+m+arg1+day;
      }
    }
  });
}

html代碼部分：code

<body>
  <div id="app">
    <input type="text" v-model="num">
    <div>{{ num }}</div>
    <!-- 使用管道 {{ data | fun }} -->
    <p>經過全局過濾器 test 判斷 num 是否 >=10</p>
    <div>{{ num | test }}</div>
    <hr/>
    <p>經過局部過濾器 addZero，將覺得數字前補0，其餘的原樣輸出</p>
    <div>{{ num | addZero }}</div>
    <hr/>
    <p>
        管道前的參數永遠都是過濾器方法的第一個參數，<br/>
        過濾器方法括號中所定義的參數，以第二位參數開始向後順序排列
    </p>
    <div>{{ today | date-format("-","參數二") }}</div>
  </div>
</body>

至此，完畢。感謝您的閱讀。orm