iT邦幫忙

0

Day 6 Vue.js – 資料綁定與事件綁定

  • 分享至 

  • xImage
  •  

Vue最強大的地方之一就是資料綁定(Data Binding)和事件綁定(Event Binding)
1.單向資料綁定(顯示資料)
https://ithelp.ithome.com.tw/upload/images/20250921/201695193Hzzljp5sO.png
當name變數改變時,畫面也會跟著變
https://ithelp.ithome.com.tw/upload/images/20250921/20169519S3FLKbCFUt.png
2.雙向資料綁定(v-model)
https://ithelp.ithome.com.tw/upload/images/20250921/201695198hPWKCP57n.png
在輸入框打字,下面的文字會即時更新
https://ithelp.ithome.com.tw/upload/images/20250921/201695192VVWAZOul0.png
3.事件綁定(v-on/@)
https://ithelp.ithome.com.tw/upload/images/20250921/20169519kKeV2wcKGV.png
每點一次按鈕,數字就會加一
https://ithelp.ithome.com.tw/upload/images/20250921/20169519hb7wTVBnjz.png
https://ithelp.ithome.com.tw/upload/images/20250921/201695194xmIwFf8Pr.png
1.單向資料綁定,只要在JavaScript裡改變變數,畫面上就會自動更新,完全不需要用document.getElementById()這種麻煩的方法。
2.v-model讓輸入框可以和變數連動,輸入什麼,畫面就會馬上顯示,這感覺就像資料和介面融為一體,非常直覺。
3.事件綁定可以很輕鬆地處理互動邏輯。


圖片
  熱門推薦
圖片
{{ item.channelVendor }} | {{ item.webinarstarted }} |
{{ formatDate(item.duration) }}
直播中

尚未有邦友留言

立即登入留言