Vue课程59-label的for属性

最新推荐文章于 2023-07-07 16:55:54 发布

前端歌谣

最新推荐文章于 2023-07-07 16:55:54 发布

阅读量260

点赞数

文章标签： vue.js 前端 javascript

本文链接：https://blog.csdn.net/qq_41632427/article/details/125596080

版权

歌谣-前端-vue2学习专栏收录该内容

96 篇文章 0 订阅

订阅专栏

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