• 前の記事: 01〜03: Hello World・デバッグ・結果の表示
• 次の記事: 05: 複数のinputに同じ変数を割り当てるとどうなる？

04. 双方向データバインディングを使ってみる

inputなどのHTMLタグにv-model属性を追加すると双方向データバインディングが有効になる（公式記事）。

<div id='app'>
  <input type="text" v-model='a'>{{a}}
</div>

ポイント: 以下を自分の環境で実行してからブラウザの開発コンソールで vm.a の値を変更するとフォームと連動する。

サンプルコード

• Vue.jsバージョン: 2.5.2

• 前の記事: 01〜03: Hello World・デバッグ・結果の表示
• 次の記事: 05: 複数のinputに同じ変数を割り当てるとどうなる？

バックナンバー（Vue.jsサンプルコード）

Vue.jsサンプルコード（01〜03）Hello World・簡単な導入方法・デバッグ・結果の表示とメモ化

• Vue.jsサンプルコード（04）双方向データバインディングを使ってみる
• Vue.jsサンプルコード（05）複数のinputに同じ変数を割り当てる
• Vue.jsサンプルコード（06）合計金額をリアルタイムに表示する
• Vue.jsサンプルコード（07）入力文字数をリアルタイムにプレビューする
• Vue.jsサンプルコード（08）入力したカラーコードをリアルタイムでプレビューする
• Vue.jsサンプルコード（09）カラーピッカーで選択した色を動的に表示する
• Vue.jsサンプルコード（10）スライダーで入力したカラーコードを動的に表示する
• Vue.jsサンプルコード（11）ラベルをクリックして表示開閉とラベル変更を行う
• Vue.jsサンプルコード（12）特定の単語を入力したらボタンを無効にする
• Vue.jsサンプルコード（13）「承認」チェックボックスをオンにしないと「送信」ボタンを押せないようにする
• Vue.jsサンプルコード（14）「承認」ボタンを押したら解除できないようにする
• Vue.jsサンプルコード（15）パスワードのマスクを解除する
• Vue.jsサンプルコード（16）パスワードを入力中だけ表示する