ログイン
問題2

フォーム入力バインディングを学ぼう! Text編

アイコン画像

問題2:フォーム入力バインディングを学ぼう! Text編

テキストエリアに入力した文字を監視しよう。
v-modelは入力した値とデータの値を結びつけることができる。
このv-modelを用いて、テキストエリアに入力した値をリアルタイムで表示してほしい。

エディターのアイコンあらかじめエディタに書くコード

                <div id="app">
  <p>
    あなたの入力した文字は? => {{ message }}
  </p>
  <input v-model="message" placeholder="入力を監視しています">
</div>
¥Vue¥
              

ブラウザのアイコン期待する画面


タグアイコン解答ソースコード

              <script>
  const vm = new Vue({
    el: "#app",
    data: {
      message: ""
    }
  });
</script>
¥Vue¥
            

コメントのアイコン解説

Vueでは、テキストエリアに入力した値とデータの値を結びつけるために'v-model'を用いる。
'v-model="データ名"'という形で記述するぞ。
'v-model="message"'で入力と'message'を結びつけ、
'{{message}}'で'message'を表示するという流れだ。
ログインして解答を見る
完了にする!
twitterのアイコン
活動記録をTweetする
Vueを学ぶなら現役エンジニア監修「甲賀コース」
LINEの友達追加でお役立ち動画をGET!!

閉じる