循环渲染多个复选框checkbox_循环的 el-row 中加checkbox-程序员宅基地

主要展示通过后台数据，循环渲染多个复选框，并解决同时选中和同时取消的问题。

思路：

1. 定义一个div容器，里面包含多个复选框，复选框的数据来源是后台数据，为数组

2. 在div容器标签中，接收该数组, v-for循环渲染

3. 通过Input标签，获取复选框的选中状态，使用v-model

4. 注意：isChecked的值为[ ]空数组。因为多个复选框的选中状态也不一样，需要接收多个状态，多个要用数组的形式接收。有些人使用true/false，结果一点击复选框，就会全选，全部都是一个状态

<!-- 最外层容器，用于包含内容-->
<div>
   <!--标题-->
   <h1>请选择你喜欢的专栏</h1>
    <!--循环渲染，正式开始，定义一个div，用于接收后台数据-->
    <div v-for="item in lists" :key="item">
      <!--此处的id是为了绑定label标签，用以显示复选框的文字内容-->
      <input type="checkbox" id="check" v-model="isChecked" :value="item" />
      <!--文字内容-->
      <label for="check">{
   { item }}</label>
    </div>
</div>

后台数据：

export default {
  data() {
    return {
      //需要被循环渲染的数据
      lists: ["科幻", "喜剧", "动漫", "冒险", "科技", "军事", "娱乐", "奇闻"],
      //选中状态
      isChecked: []
    }
  }
}

效果：

完结撒花！

本文链接：https://blog.csdn.net/weixin_60353902/article/details/134123000

原作者删帖不实内容删帖广告或垃圾文章投诉

智能推荐

react引用Ant Design后，表格点击时添加背景色_table中oncell怎么设置表体单元格属性点击换背景颜色react-程序员宅基地

文章浏览阅读4.8k次，点赞2次，收藏7次。问题描述： Antd中新建一个表格后，默认只添加了鼠标经过事件，即：鼠标经过表格的每一行时，那一行就会添加一个淡色的背景。但是现在有需求，要给表格添加一个点击事件，就是在点击每一行时，也会添加一个背景效果。解决方法：查看Antd的官网文档可以发现，表格有rowClassName和onRow两个属性，我们通过这两个属性来实现表格的点击添加背景色效果。..._table中oncell怎么设置表体单元格属性点击换背景颜色react

UVM实战——01基本概念_1 芯片验证和验证计划_芯片验证计划编写-程序员宅基地

文章浏览阅读499次。UVM基础_芯片验证计划编写

android WebView介绍（一）_android webview l-程序员宅基地

文章浏览阅读602次。原文 http://www.cnblogs.com/lyricgan88/p/3361383.html在Android手机中内置了一款高性能webkit内核浏览器，在SDK中封装成名为WebView的组件。WebView使用：（1）添加权限：AndroidManifest.xml中必须使用许可"android.permission.INTERNET",否则会出Web page _android webview l

Jenkins报错：ERROR: Maven JVM terminated unexpectedly with exit code 1-程序员宅基地

文章浏览阅读2k次。Jenkins报错：Build step 'Execute shell' marked build as failureERROR: Maven JVM terminated unexpectedly with exit code 1Finished: FAILURE[root@localhost bin]# free -m total used free shared buff/cache availableMem: _maven jvm terminated unexpectedly with exit code 1

Cannot locate a 64-bit Oracle Client library: “libclntsh.so: cannot open shared object file: No such-程序员宅基地

文章浏览阅读3.4k次。libclntsh.so: cannot open shared object file: No such file or directory_cannot locate a 64-bit oracle client library

计算机考研考博经典考题汇总(一次刷新世界观-我相信VIP总是有原因的）_中断解决处理器速度和硬件不匹配-程序员宅基地

文章浏览阅读4.1w次，点赞14次，收藏96次。操作系统操作系统的特点？– 共享：资源可被多个并发执行的进程使用– 并发：可以在同一时间间隔处理多个进程，需要硬件支持– 虚拟：将物理实体映射成为多个虚拟设备– 异步：进程执行走走停停，每次进程执行速度可能不同，但OS需保证进程每次执行结果相同进程的三个组成部分？程序段、数据段、PCB(Process Control Block)并发与并行区别？并发：同一间隔并行：同一时刻进程切换的过程？保持处理机上下文 -> 更新PCB -> 把PCB移入相应队列(就绪、阻塞) -&g_中断解决处理器速度和硬件不匹配

随便推点

06.background&font-------11.线性渐变&径向渐变_background-image径向渐变-程序员宅基地

文章浏览阅读311次。1. 我们可以通过渐变来实现复杂的背景颜色，实现从一个颜色向另一个颜色过渡的效果注意：渐变是图片，需要通过background-image来设置2.线性渐变：linear-gradient，颜色沿着一条直线发生变化用法：background-image：linear-gradient（渐变方向，渐变颜色1，渐变颜色2），可同时设置多个渐变颜色，多个颜色默认情况下平均分布在线性渐变开始部分可以指定渐变的方向：to top、 to bottom（渐变方向为向下渐变，也是默认方向..._background-image径向渐变