最近在工作上剛好用到了「Filter(過濾器)」，今天就來看一下，它可以幫我們處理文字資料，寫法為dataName | filterFunction，「dataName」這裡是放資料的名稱，用「|」分格，「filterFunction」是過濾器的函式名稱，接下來看看如何加入，方法分為以下兩種：

• 資料綁定寫法 {{ dataName | filterFunction }}
• v-bind寫法 <div v-bind:id="dataName | filterFunction"></div>

馬上來個實例試試看：

<template>
  <div id="app">
    <div>空汙指數 {{ airPollution | filterData }}</div>
  </div>
</template>

<script>
  export default {
    data() {
      return {
        airPollution: 152
      }
    },
    filters: {
      filterData(airPollution) {
        return 'AQI:' + airPollution;
      }
    }
  }
</script>

依照剛剛的寫法，在filters:內寫入函式，我取名為filterData並使用airPollution資料，return(回傳)AQI: + airPollution。
以上得到的結果為「空汙指數 AQI：152 」

Filters串聯

filters還可以做串聯，同時串多個filter函式，方法如下：

<template>
  <div id="app">
    <div>空汙指數 {{ airPollution | filterData | releaseTime }}</div>
  </div>
</template>

一樣用「|」接著分格就行，要特別注意的是，filter的結果會受到排列順序影響。

Filters參數

filters也可以加入參數，以剛剛的範例接著做，現在我想抓今天的日期並帶入filters，這時會需要用到「Day.js」，它是一個處理時間和日期的JavaScript庫，檔案非常小，輸入npm install dayjs --save來安裝！

Day.js
https://github.com/iamkun/dayjs/blob/master/docs/zh-cn/README.zh-CN.md

完成安裝後，從上面的「Day.js」連結，你可以查到它的使用文件，並在其中找到抓今天日期的寫法dayjs()，還可設定日期格式format('YYYY-MM-DD')，該如何寫入呢？請看以下範例：

<template>
  <div id="app">
    <div>空汙指數 {{ airPollution | filterData | releaseTime(saveDate) }}</div>
  </div>
</template>

<script>
  import * as dayjs from 'dayjs'
  export default {
    data() {
      const saveDate = dayjs().format('YYYY-MM-DD')
      return {
        airPollution: 152,
        saveDate: saveDate
      }
    },
    filters: {
      filterData(airPollution) {
        return 'AQI：' + airPollution + ' / 時間：'
      },
      releaseTime(saveDate, airPollution) {
        return saveDate + airPollution
      }
    }
  }
</script>

• 引用「Day.js」套件import * as dayjs from 'dayjs'。
• 定義const saveDate = dayjs().format('YYYY-MM-DD')，也就是說「saveDate」是抓今天的日期，並指定格式為「年-月-日」。
• return(回傳)saveDate結果出來。
• 新增filters函式releaseTime，寫法跟之前一樣。
• 最後把releaseTime綁入頁面，並帶入參數(saveDate)

完成了！結果就是「空汙指數 AQI：152 / 時間：2018-11-08」，沒錯吧！從今天的學習內容可以知道，Filters主要用在簡單的文字格式處理，但如果是複雜的資料處理，還是要用Computed喔！

Vue[17]-Computed與Methods
https://ithelp.ithome.com.tw/articles/10206990

最近空氣品質真的很差，灰濛濛的一片，大家出門多注意！