昨天學習到如何在vue中使用自定義組合變數option API-computed，今天則是資料顯示處理中的字串過濾處理-filter，filter是幫助開發人員建立過濾器後，在模板可以直接使用過濾器處理綁定的屬性值，但這個功能在Vue3已經移除了，只能在Vue2中使用。

字串過濾處理-filter

• 語法（一般）：

filters:{
	過濾器名稱(inputValue){
	//針對傳進來的值進行過濾或格式化處理
    }
}

HTML中的表示：
1.{{filter對象 | 過濾器名稱}}
2.＜div v-bind:id=”filter對象 | 過濾器名稱”＞＜/div＞

• 語法（多個參數）：

filters:{
	過濾器名稱(inputValue,arg1,arg2...){
	//針對傳進來的值進行過濾或格式化處理
    }
}

HTML中的表示：
1.{{filter對象 | 過濾器名稱(arg1,arg2...)}}
2.＜div v-bind:id=”filter對象 | 過濾器名稱(arg1,arg2...)”＞＜/div＞

範例：
目標：
將電話0212345678格式化成02-1234-5678
將手機號碼如0912345678格式化成0912-345-678

<div id="app">
     手機：{{phone|phoneFormater}}</br>
     電話：{{tel|telFormater}}
</div>

<script>
    var app = new Vue({
        el: '#app',
        data: {
           phone: '0912345678',
           tel: '0212345678',
        },
                
        //過濾器
        filters:{
           phoneFormater(originPhone){
              let formatNumber='';
              formatNumber+=originPhone.substr(0,4);
              formatNumber+='-';
              formatNumber+=originPhone.substr(4,3);
              formatNumber+='-';
              formatNumber+=originPhone.substr(7,3);

              return formatNumber;
           },
           telFormater(originTel){
             let formatNumber='';
             formatNumber+=originTel.substr(0,2);
             formatNumber+='-';
             formatNumber+=originTel.substr(2,4);
             formatNumber+='-';
             formatNumber+=originTel.substr(6,4);

             return formatNumber;
            },
        }
    })
</script>

執行結果：

說明：

• data資料模型：
  創建phone及tel屬性，兩個皆為字串資料型態。

• filter過濾器：
  1.phoneFormater：負責將手機號碼格式化為xxxx-xxx-xxx
  2.telFormater：負責將電話號碼格式化為xx-xxxx-xxxx
  兩個過濾器裡面的內容相似，一併解釋：
  先宣告formatNumber為字串（String），再將手機/電話號碼用substr分割，舉例：originPhone.substr(0,4);意思是手機號碼從索引值0開始取，取4個，也就是上面範例的0912這四個數字，接著再加入-將數字分開，後面以此類推。

• HTML模板：
  使用{{}}綁定屬性，{{phone | phoneFormater}}意思為phone是要過濾的對象，用phoneFormater這個過濾器過濾phone。