【Vue.js】双方向データバインディング v-model

はじめに

こんにちは！　松本　佑大（まつもと　ゆうだい）と申します！
今回は双方向データバインディング v-modelについてアウトプットしていきます！

双方向データバインディング、v-modelとは

双方向データバインディングとは、

dataオブジェクトの値変更テンプレートの値変更
に加えて
dataオブジェクトの値変更テンプレートの値変更

というように双方向にデータをバインディングすることを指します。

v-modelは双方向データバインディングを実行するときに使用するディレクティブになります。

書き方

HTML

<p>
  <input type="text" v-model="message">
</p>
<p>
  <input type="text" v-model="message">
</p>
<pre>{{ $data.message }}</pre>

Vue.js

var app = new Vue({
    el:'#app',
    data:{
      message=`Hello Vue.js`
    }
})

書き方はv-bindとさほど書き方は変わりません。しかし、v-bind:valueではなくv-modelとすることによって上記画像のように双方向にデータをバインディングすることが可能になります。

まとめ

・<input type="text" v-model="message">と記述する。
・valueはいらない。

最後に

今回は双方向データバインディング v-modelについてアウトプットしました。
今回の記事を読んで気になったこと、質問等あればコメント等頂けると幸いです。

今後ともQiitaにてアウトプットしていきます！

最後までご愛読ありがとうございました！