一丶v-model:checkbox
- 复选框分为两种情况:单个勾选框和多个勾选框
- 单个勾选框:
- v-model即为布尔值
- 此时input的value并不影响v-model的值
- 多个复选框:
- 当是多个复选框时,因为可以选中多个,所以对应的data中属性是一个数组
- 当选中某一个时,就会将input的value添加到数组中
二丶代码实战
<!--作者:key-->
<!--浏览工具:Chrome-->
<!--开发工具:WebStorm-->
<!--开发时间:2020/11/22 13:38-->
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
</head>
<body>
<div id="app">
<!-- 有label,可以点击文字,也可以直接勾选按钮-->
<!-- 1.演示单选框-->
<label for="license">
<input type="checkbox" id="license" v-model="isAgree">同意协议
</label>
<h2>您选择的是:{{isAgree}}</h2>
<button :disabled="!isAgree">下一步</button>
<hr>
<!-- label没有id,那么点击文字,就不能达到勾选的目的,就只能去点击框勾选-->
<label for="">
<input type="checkbox" value="篮球" v-model="hobbies">篮球
<input type="checkbox" value="足球" v-model="hobbies">足球
<input type="checkbox" value="乒乓球" v-model="hobbies">乒乓球
<input type="checkbox" value="排球" v-model="hobbies">排球
</label>
<h2>您选择的爱好是:{{hobbies}}</h2>
</div>
<script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
<script>
const app = new Vue({
el:"#app",
data:{
isAgree:false,//单选框
hobbies:[] //多选框
}
})
</script>
</body>
</html>
三丶运行结果