iT邦幫忙

2019 iT 邦幫忙鐵人賽

DAY 25
0

最近在工作上剛好用到了「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

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


上一篇
Vue[24]-動畫(四)
下一篇
Vue[26]-$emit
系列文
網頁設計靠 Vue.js 轉前端30

尚未有邦友留言

立即登入留言