# [Vue.js] Filter過濾器

###### tags: `Vue.js`

### 範例ㄧ：價格

將價格 price 加上千分位符號與 $ 字號。可使用「|」（pipe）聯集多個 Filter，要注意順序，愈靠左愈先執行。

* price為數值，後方為待執行的子函式，預期的結果是$9,990

<div id="app">
  <div>${ price | commaFormat | priceFormat }</div>
</div>

* 新增Filters函數列，子函式們會自動將price的數值當作參數代入，並依序執行條件後回傳。

var vm = new Vue({
  el: '#app',
  delimiters: ['${', '}'],
  data: {
    price: 9999,
  },
  Filters: {
    priceFormat: function(value) {
      // 加上 $ 字號
      return '$' + value;
    },
    commaFormat: function(value) {
      // 加上千分位符號
      return value
        .toString()
        .replace(/^(-?\d+?)((?:\d{3})+)(?=\.\d+$|$)/, function(all, pre, groupOf3Digital) {
          return pre + groupOf3Digital.replace(/\d{3}/g, ',$&');
        });
    },
  },
});

### 範例ㄧ：轉譯星期週數

<div>
    <h2 class="date-week ml-1">{{date.getDay() | convertToChineseDay}}</h2>
<!-- covert函數會套用另一數值當作參數 -->
</div>

透過參數對應的方式，取出當天中文星期數

filters: {
    convertToChineseDay(day) {
      const chineseDay = ["日", "一", "二", "三", "四", "五", "六"];
      return `星期${chineseDay[day]}`;
      //此時的參數(day)))是套用在Ｉ前方的數值，自動套入無需宣告
      //取得getday()取得星期，星期日＝0 星期一 = 1....
    },
  },