<!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>
