<body>
<div id="app">
<label for="agree">
<input type="checkbox" name="agree" id="agree" v-model="isAgree">同意协议：
<button :disabled="!isAgree">下一步</button>
<!-- 点击了同意协议 才能点击下一步 所以button表单禁用 和上面取反 -->
</label> <br>
<br>
<br>
<br>
<label for="basketball">
<input type="checkbox" id="basketball" value="篮球" v-model="hobbies">篮球
</label>
<label for="football">
<input type="checkbox" id="football" value="足球" v-model="hobbies">足球
</label>
<label for="table_tennis">
<input type="checkbox" id="table_tennis" value="乒乓球" v-model="hobbies">乒乓球
</label>
<label for="badminton">
<input type="checkbox" id="badminton" value="羽毛球" v-model="hobbies">羽毛球
</label>
<p>
你的爱好是：{{ hobbies }}
</p>
<!-- 值绑定 -->
<label v-for="i in originHobbies" :for="i">
<input type="checkbox" :value="i" :id="i" v-model="hobbies"> {{ i }}
</label>
</div>
<script src='https://cdn.jsdelivr.net/npm/vue@2.6.12/dist/vue.js'></script>
<script>
const app = new Vue({
el: '#app',
data: {
isAgree: false, // 单选框对应 布尔值
hobbies: [], //复选框 对应数组
originHobbies: ["足球", "篮球", "乒乓球", "羽毛球"]
}
})
</script>
</body>