如果v-model的初始值为字符串
选中后的值会为true，取消选中后为false
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<title>Document</title>
</head>
<body>
<div id="app">
<p>{{checkboxVal}}</p>
<el-checkbox v-model="checkboxVal" label="one">第一个</el-checkbox>
<el-checkbox v-model="checkboxVal" label="two">第二个</el-checkbox>
</div>
<script src="./vue.js"></script>
<!-- 引入ele样式 -->
<link rel="stylesheet" href="./ele.css" />
<!-- 引入ele组件库 -->
<script src="./index.js"></script>
<script>
new Vue({
el: "#app",
data: {
checkboxVal: '',
},
});
</script>
</body>
</html>
- 不选择，值为false
- 选择后，点击一个，另一个也被选择，值为true
如果v-model的初始值为数组
选中后是添加该项的值，取消选中后是删除该项的值
添加的值为属性label对应的值
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<title>Document</title>
</head>
<body>
<div id="app">
<p>{{checkboxVal}}</p>
<el-checkbox v-model="checkboxVal" label="one">第一个</el-checkbox>
<el-checkbox v-model="checkboxVal" label="two">第二个</el-checkbox>
</div>
<script src="./vue.js"></script>
<!-- 引入ele样式 -->
<link rel="stylesheet" href="./ele.css" />
<!-- 引入ele组件库 -->
<script src="./index.js"></script>
<script>
new Vue({
el: "#app",
data: {
checkboxVal: [],
},
});
</script>
</body>
</html>
- 当选择第一项时，第一项的label值被添加
- 选择两项时，两项的label都被添加，点击一个不会影响另一个一起被选择
