問題

2
Vue.js

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

Vue.jsの問題に挑戦しよう!

問題

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

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

あらかじめエディタに書くコード

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

期待する画面

解答と解説(フォーム入力バインディングを学ぼう! Text編)

解説

LINE登録して解答を見る

※ご登録後トークルーム下部にあるメニュー内
「無料問題集※解答付き」を押すと
解答閲覧用URLが届きます

Vueでは、テキストエリアに入力した値とデータの値を結びつけるために'v-model'を用いる。
'v-model="データ名"'という形で記述するぞ。
'v-model="message"'で入力と'message'を結びつけ、
'{{message}}'で'message'を表示するという流れだ。

さらにスキルアップしたい方は公式LINEから「Vue.js」と送信すると動画が見れます。

LINE登録して動画を視聴する
あなたに合った学習プランは?LINE適正コース診断はこちら
最大100,000円OFF 対象期間中に初めて無料相談にお申し込みされた方へ 無料相談はこちら