讓資料進行雙向綁定的 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 定義的資料,如果編輯資料會馬上改變值,達到雙向溝通綁定