iT邦幫忙

第 11 屆 iThome 鐵人賽

DAY 6
0
自我挑戰組

輕鬆Vue一下系列 第 6

Day6-雙向綁定v-model(文字)

  • 分享至 

  • xImage
  •  

v-model屬性可以在表單inputtextareaselect元素上創建雙向數據綁定,它會根據物件類型自動選取正確的方法來更新元素,但是它會忽略元素中的valuecheckedselected屬性初始值,需要在JavaScript中的vue物件裡的data屬性宣告初始值。這裡以input為例:
https://ithelp.ithome.com.tw/upload/images/20190922/20112076rkl7KRJPy2.jpg
在data中建立一個message字串,並設定其初始值
https://ithelp.ithome.com.tw/upload/images/20190922/20112076drigIW4wPE.jpg
利用v-model來綁定message的內容
https://ithelp.ithome.com.tw/upload/images/20190922/20112076XQWsfEBctG.jpg
產生只要input輸入框內的文字內容更改,下方字串也會自動更新的效果

明日預告:雙向綁定v-model(單選&複選)


上一篇
Day5-迴圈v-for
下一篇
Day7-雙向綁定v-model(單選&複選)
系列文
輕鬆Vue一下30
圖片
  直播研討會
圖片
{{ item.channelVendor }} {{ item.webinarstarted }} |
{{ formatDate(item.duration) }}
直播中

尚未有邦友留言

立即登入留言