問題2:フォーム入力バインディングを学ぼう! Text編
テキストエリアに入力した文字を監視しよう。
v-modelは入力した値とデータの値を結びつけることができる。
このv-modelを用いて、テキストエリアに入力した値をリアルタイムで表示してほしい。
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¥
完了にする!
活動記録をTweetする
'v-model="データ名"'という形で記述するぞ。
'v-model="message"'で入力と'message'を結びつけ、
'{{message}}'で'message'を表示するという流れだ。