スポンサーリンク

Vue.js v-model基礎

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

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

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

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

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

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

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

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

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

サンプルコード html

実行結果

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

解説

実行結果のように、

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

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

 

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

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

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

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

まとめ

  • v-modelでVueインスタンスのdataのキーを指定すると、双方向バインディングができる。
Vue.js
スポンサーリンク
シェアする
trelab