Vue.js 複数のチェックボックス(checkbox)タグの実装サンプル
環境
vue 2.6.14
Google Chrome 106.0.5249.119
構文
1.チェックボックスの定義
input id="id名" type="checkbox" value="値" v-model="value"
チェックボックスにv-model=”プロパティ値”を記載します。
2.Vueインスタンスを作成します
new Vue({
el: '#cft',
data: {
value: [チェックボックスのvalue値],
},
new Vue({
el: '#cft',
data: {
value: [チェックボックスのvalue値],
},
new Vue({
el: '#cft',
data: {
value: [チェックボックスのvalue値],
},
「value:['checkbox valueの値’]」を指定して複数のチェックボックスの初期選択情報を指定します。
使用例
<!DOCTYPE html>
<html>
<script src="https://cdn.jsdelivr.net/npm/vue@2.6.14/dist/vue.js"></script>
<body>
<div id="cft">
<input id="cha" type="checkbox" value="1" v-model="value" /><label
for="cha">東京</label>
<input id="chb" type="checkbox" value="2" v-model="value" /><label
for="chb">大阪</label>
<input id="chc" type="checkbox" value="3" v-model="value" /><label
for="chc">福岡</label>
<p>{{value}}</p>
</div>
<script>
const app = new Vue({
el: '#cft',
data: {
value: ['3'],
},
});
</script>
</body>
</html>
<!DOCTYPE html>
<html>
<script src="https://cdn.jsdelivr.net/npm/vue@2.6.14/dist/vue.js"></script>
<body>
<div id="cft">
<input id="cha" type="checkbox" value="1" v-model="value" /><label
for="cha">東京</label>
<input id="chb" type="checkbox" value="2" v-model="value" /><label
for="chb">大阪</label>
<input id="chc" type="checkbox" value="3" v-model="value" /><label
for="chc">福岡</label>
<p>{{value}}</p>
</div>
<script>
const app = new Vue({
el: '#cft',
data: {
value: ['3'],
},
});
</script>
</body>
</html>
<!DOCTYPE html>
<html>
<script src="https://cdn.jsdelivr.net/npm/vue@2.6.14/dist/vue.js"></script>
<body>
<div id="cft">
<input id="cha" type="checkbox" value="1" v-model="value" /><label
for="cha">東京</label>
<input id="chb" type="checkbox" value="2" v-model="value" /><label
for="chb">大阪</label>
<input id="chc" type="checkbox" value="3" v-model="value" /><label
for="chc">福岡</label>
<p>{{value}}</p>
</div>
<script>
const app = new Vue({
el: '#cft',
data: {
value: ['3'],
},
});
</script>
</body>
</html>
結果
「東京」、「大阪」、「福岡」チェックを付けると、[ “1", “2", “3" ]が表示されます。