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