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つ目の入力欄の値を変更すると、他も変更されます。

gyazo.com