Vue
LINEでログイン
Googleでログイン
Twitterでログイン問題3：フォーム入力バインディングを学ぼう！ Value編
今度はチェックボックスの入力を監視しよう。
単体のチェックボックスの入力は真偽値で、複数のチェックボックスの入力は配列で取得してほしい。
チェックボックスの入力とデータの値の結びつけにもv-modelを用いる。
単体のチェックボックスの入力は真偽値で、複数のチェックボックスの入力は配列で取得してほしい。
チェックボックスの入力とデータの値の結びつけにもv-modelを用いる。
あらかじめエディタに書くコード
<div id="app">
<p>{{ checked }}</p>
<input type="checkbox" v-model="checked">
<p>{{ selectedValues }}</p>
<label for="one">1</label>
<input type="checkbox" id="one" value="1" v-model="selectedValues">
<label for="two">2</label>
<input type="checkbox" id="two" value="2" v-model="selectedValues">
<label for="three">3</label>
<input type="checkbox" id="three" value="3" v-model="selectedValues">
</div>
¥Vue¥
期待する画面
解答ソースコード
<script>
const vm = new Vue({
el: "#app",
data: {
checked: false,
selectedValues: []
}
});
</script>
¥Vue¥
完了にする！
活動記録をTweetする
テキストエリアと同様に'v-model'を用いるぞ。
データの値を真偽値とすることで、チェックボックスの入力のchecked属性と結びつけることができる。
また、データの値を配列とすることで、複数のチェックボックスのvalue属性と結びつけることができる。