スポンサーリンク

Vue.js v-model基礎

公式ドキュメントのユーザー入力の制御の項目で説明しているv-modelについて記載していきます。

v-modelは双方向バインディングができる

双方向バインディングとは

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

Vue.jsではVueインスタンスのdataの変更と、

ブラウザ側からの入力によってdataの変更が双方向で行えることです。

v-modelで双方向バインディングする

公式ドキュメントのコードを参考に、

双方向バインディングするコードを書いてみます。

サンプルコード html

<html>
  <head>
    <script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
  </head>
  <body>
    <div id="app">
      <p>{{ message }}</p>
      <input v-model="message">
    </div>
  </body>
</html>
<script>
var app = new Vue({
  el: '#app',
  data: {
    message: 'テキストエリアの文字表示'
  }
})
</script>

実行結果

実行結果の状態からテキストエリアの文字を変える

解説

実行結果のように、

テキストエリアの文字列を変えると、

表示されている文字列も動的に変わります。

 

それを満たしているのが下記のコードの箇所です。

<input v-model="message">

v-modelにVueインスタンスのdataのキーを入れることで、

そのキーのデータをテキストエリアで変えることができるようになっています。

これが双方向バインディングです。

まとめ

  • v-modelでVueインスタンスのdataのキーを指定すると、双方向バインディングができる。