Vue.js 双方向バインディングサンプル（v-model）

投稿日：2018年8月6日

Vue.jsの強力な機能の１つに、双方向バインディングがあります。
難しそうな名前ですが、簡単に言うとスクリプト側の変数とHTML側の変数を結びつける機能です。

今回作るサンプルは、HTML側の「テキストエリアの内容」と、「Vue.jsの変数」をバインディングします。
こうしておくと「テキストエリアに入力した内容でVue.jsの変数が瞬時に更新されます。」
「テキストエリアの内容 = Vue.jsの変数」のイメージです。

この機能をうまく使いこなせば、HTMLとスクリプト側での値の受け渡しの処理を記述することが不要になります。

とても便利ですね！

スクリプト（Vue.js 双方向バインディングサンプル（v-model））

var app = new Vue({
  el: '#app',
  data: {
    message:'ここの文字をカウントします。',
  }
})

var app = new Vue({

el: '#app',

data: {

message:'ここの文字をカウントします。',

}

})

スクリプト側には「message」という変数を用意しておきましょう。
この「message」と「テキストエリア」をバインディングします。

<div id="app">
  <p>{{message.length}}文字入力されました。</p>
  <textarea v-model="message"></textarea>
  <p>{{message}}</p>
</div>

<p>{{message.length}}文字入力されました。</p>

<p>{{message}}</p>

</div>

[2行目]
messageの文字数を表示させています。
messageの内容が瞬時に変わっていることを確認するためです。
ツイッターみたいに、残り何文字入力できるかを表示させるためにも利用できますね。

[3行目]
バインディングするためにの仕掛けを記述します。
「v-model = “message”」でテキストエリアの内容と、messageが結びつきました。

[4行目]
「message」変数の内容を記述します。
こちらもmessageの内容が瞬時に変わったことが確認できますね。

たったこれだけでバインディングの仕組みが出来上がりました！
バインディングを使って色々出来そうですね！

サンプルも作ってます。

コード変更や、大きな画面でみたい場合はこちらから。

執筆者：sasaki