超緊繃!30天Vue.js學習日記 過濾器在手,資料改起來!

大家好,今天要來跟大家介紹過濾器,假設今天我們從後端取得了一些資料(像是數字….之類的),我們想要讓這些資料做點改變,比如說:將小數去到小數點後第2位,或是將英文字母轉成小寫/大寫..等等,那我們要怎麼使用過濾器對資料動手腳呢?

首先,我們必須讓資料插入過濾器,我們可以:

• 使用v-bind

<div v-bind:id="msg | uppercase"></div>

• 在雙括號中插值

{{ msg | uppercase }}

再來,我們需要在component中建立過濾器uppercase:

filters: {
    uppercase(value) {
      if (!value) return ''
    	value = value.toString()
    	return value.charAt(0).toUpperCase() + value.slice(1)
    }
  }  

補充: slice()會回傳一個新的陣列物件，內容是拷貝原本陣列的開始到結束(不包括結束的位置),這樣一來,原本的陣列也不會被修改。

當然,我們也可以一次插入多個過濾器:

<div>{{ msg | uppercase | uppercase2 }}<div v-bind:id="msg | uppercase"></div></div>
filters: {
    uppercase(value) {
      if (!value) return ''
    	value = value.toString()
    	return value.charAt(0).toUpperCase() + value.slice(1)
    },
    uppercase2(value) {
    	return value +'world'
    }
  }  

效果如下:

今天的教學到這邊結束,我們明天見~~
如果不需要範例的代碼,可以左轉離開了XD

本日範例下載:

https://drive.google.com/open?id=1zRy4LxLJSK369_hgXQXDAGAZ0Bx1oZOw