haayaaa’s diary

日々学んだことについてまとめていきます。主にRuby、Rails、JavaScript、HTML、CSSについてです。

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