More than 3 years have passed since last update.

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

Posted at 2021-10-18

はじめに

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

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