v-model 双方向データバインディング
ディレクティブの続きです。
v-model
v-modelを要素に追加すると、双方向データバインディングを行うことができます。
双方向データバインディング
双方向データバインディングとは、dataオブジェクトの値を変更すると、テンプレートの値を変更するだけでなく、
テンプレートの値を変更すると、dataオブジェクトの値も変更できる技術のことです。
例
index.html
<div id="app">
<p>
<input type="text" v-model="message">
</p>
<p>
<input type="text" v-model="message">
</p>
<p>{{message}}</p>
</div>
<script src="https://cdn.jsdelivr.net/npm/vue@2.5.16/dist/vue.js"></script>
index.js
var app = new Vue({
el: '#app',
data: {
message: 'Hello Vue.js!'
}
})
ブラウザ
1つ目の入力欄の値を変更すると、他も変更されます。