iT邦幫忙

2021 iThome 鐵人賽

DAY 7
0
自我挑戰組

新手遇上Vue.js系列 第 7

Day7 計算屬性 Computed

  • 分享至 

  • xImage
  •  

計算屬性(Computed)
→為了讓程式碼更加方便理解與未來維護,因此使用計算屬性

原始訊息:Hello World!
反轉訊息:!dlroW olleH
https://ithelp.ithome.com.tw/upload/images/20210921/201400769Dhn0Hcxlo.png
https://ithelp.ithome.com.tw/upload/images/20210921/201400764PF2801ejY.png

  • Split() : 可以將字串分隔成陣列
  • Reverse() : 將陣列內的內容反轉
  • Join() : 將內容轉為字串

將它更改為
https://ithelp.ithome.com.tw/upload/images/20210921/20140076UsvHTLHZQF.pnghttps://ithelp.ithome.com.tw/upload/images/20210921/20140076EY85ZqZsyl.png

是否看起來更簡潔了
Compute的一個特點就是暫存,每次使用到它的時候它就能將結果存起來,當給予的資料變更時才會更新

Get與Set
https://ithelp.ithome.com.tw/upload/images/20210921/20140076j3Y3CEcwFr.png

get在computed預設中,它只能讀取而不能更改,但可以經由set來做寫入更改
當輸入fullName新的值時,這個新的值就會帶入到fullName的set方法裡面的newValue,當執行完後才會去執行get方法,最後get的值才回傳fullName

今天介紹了計算屬性(Computed),明天會來談談資料監聽

參考資料: https://cythilya.github.io/2017/04/15/vue-computed/
https://www.coderbridge.com/series/bef169fb20024cafb8cdb32d5b2a0d3d/posts/ff3a967796784f9abfa1aa6451a18b48
https://zh.javascript.info/property-accessors


上一篇
Day6 輸入框介紹
下一篇
Day8 資料監聽
系列文
新手遇上Vue.js30
圖片
  直播研討會
圖片
{{ item.channelVendor }} {{ item.webinarstarted }} |
{{ formatDate(item.duration) }}
直播中

尚未有邦友留言

立即登入留言