Vue课程59-label的for属性 

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

posted @   前端导师歌谣  阅读(161)  评论(0)  编辑  收藏  举报
相关博文：
·  Vue课程54-了解v-for得语法
·  Vue课程39-Vue基础用法-属性绑定指令
·  label的for属性
·  HTML 标签中 for 属性的用法
·  HTML中的标签for标签
阅读排行：
· 25岁的心里话
· 闲置电脑爆改个人服务器（超详细） #公网映射 #Vmware虚拟网络编辑器
· 基于 Docker 搭建 FRP 内网穿透开源项目（很简单哒）
· 零经验选手，Compose 一天开发一款小游戏！
· 一起来玩mcp_server_sqlite，让AI帮你做增删改查！！
点击右上角即可分享
微信分享提示