<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
</head>
<body>
<input type="checkbox" id="cb1">
<label for="cb1">男</label>
<hr>
<input type="checkbox" id="cb2">
<label for="cb2">女</label>
</body>
</html>通过id进行数据的绑定
<div class="custom-control custom-switch">
<!-- 使用 v-model 实现双向数据绑定 -->
<input type="checkbox" class="custom-control-input"
:id="'cb' + item.id" v-model="item.status">
<!-- 使用 v-if 结合 v-else 实现按需渲染 -->
<label class="custom-control-label" :for="'cb'
+ item.id" v-if="item.status">已启用</label>
<label class="custom-control-label" :for="'cb' + item.id"
v-else>已禁用</label>
</div>