iT邦幫忙

第 11 屆 iThome 鐵人賽

DAY 16
1
Modern Web

超緊繃!30天Vue.js學習日記系列 第 16

[Vue.js][日記]過濾器在手,資料改起來!

  • 分享至 

  • xImage
  •  

https://ithelp.ithome.com.tw/upload/images/20190912/20110850dsypfXRkNe.jpg

超緊繃!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'
    }
  }  

效果如下:

https://ithelp.ithome.com.tw/upload/images/20190926/20110850y2SttGUytl.png

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

本日範例下載:

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


上一篇
[Vue.js][日記]組件最終篇-動態組件的部分!
下一篇
[Vue.js][日記]CSS過渡
系列文
超緊繃!30天Vue.js學習日記33
圖片
  直播研討會
圖片
{{ item.channelVendor }} {{ item.webinarstarted }} |
{{ formatDate(item.duration) }}
直播中

尚未有邦友留言

立即登入留言