讓資料進行雙向綁定的 Vue 指令:V-model

v-model 特點

  • input 加上 v-model 能夠與 vue 進行雙向溝通
  • 會覆蓋 HTML 的 value、checked、selected 預設值

v-model 範例

HTML

1
2
3
4
<div id="app">
<input type="text" v-model="message">
{{ message }}
</div>

JavaScript

1
2
3
4
5
6
7
8
9
const app = {
data () {
return {
message: '哈囉',
}
}
}

Vue.createApp(app).mount('#app');
  • 先在 JS 定義 message 資料,並透過 顯示資料在網頁上
  • 在 input 標籤上榜定 v-model,預設會載入 JS 定義的資料,如果編輯資料會馬上改變值,達到雙向溝通綁定

希望我的文章能夠幫助到你,有任何問題或是想與我討論交流,歡迎透過留言與我分享你的觀點。

如果你喜歡我的文章,想支持我繼續撰寫更多文章,歡迎你:

  1. 將我的部落格加入書籤,隨時造訪部落格。
  2. 將我的文章分享給你的親朋好友。
  3. 透過 LikeButton 幫我按 5 下讚。
  4. 每月贊助 LikeCoin 請我喝杯咖啡。(雖然我不喝咖啡啦 XD)