vue中循环数据,添加展开、收起操作

1.在data中定义变量 expandedIndex,默认展开第一条

expandedIndex:0,

2.标题栏展开、收起显示判断,并填加点击事件 toggleVisibility

     <h5 class="titleLine">{{item.checkPart}}  <span @click="toggleVisibility(index)">{{expandedIndex === index ? '收起' : '展开'}}</span></h5>

3.要展开收起的div处加显示、隐藏判断

  <div class="checkbox"  v-show="expandedIndex === index">
              <el-form-item label="检查时间"  >
                <el-input
                  v-model="item.checkTime"
                  placeholder="请输入检查时间"
                  clearable
                  disabled
                  size="small"
                />
              </el-form-item>
     </div>

4.点击事件 toggleVisibility 逻辑处理

toggleVisibility(index) {
        if (this.expandedIndex === index) {
          this.expandedIndex = null; // 收起当前展开的模块
        } else {
          this.expandedIndex = index; // 展开点击的模块
        }
      },

效果如下图
在这里插入图片描述

本文来自互联网用户投稿,该文观点仅代表作者本人,不代表本站立场。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如若转载,请注明出处:/a/477667.html

如若内容造成侵权/违法违规/事实不符,请联系我们进行投诉反馈qq邮箱809451989@qq.com,一经查实,立即删除!

相关文章

【GPT概念04】仅解码器(only decode)模型的解码策略

一、说明 在我之前的博客中&#xff0c;我们研究了关于生成式预训练转换器的整个概述&#xff0c;以及一篇关于生成式预训练转换器&#xff08;GPT&#xff09;的博客——预训练、微调和不同的用例应用。现在让我们看看所有仅解码器模型的解码策略是什么。 二、解码策略 在之前…

【LVGL-按钮按钮矩阵部件】

LVGL-按钮&按钮矩阵部件 ■ LVGL-按钮部件■ 按钮部件&#xff1a; 点击三个按钮一个回调函数修改label值。 ■ LVGL-按钮矩阵部件■ 示例一&#xff1a;按钮换行&#xff0c;和宽度设置。■ 示例二&#xff1a;设置按钮宽度为2倍■ 示例三&#xff1a;获取点击的按钮下标&…

【以图搜图】GPUNPU适配万物识别模型和Milvus向量数据库

目录 以图搜图介绍项目地址Milvuscv_resnest101_general_recognition 代码使用流程结果展示模型部署环境Milvus部署及使用docker安装docker-compose安装Milvus可视化工具Attu进入网页端 Data数据示例点个赞再走呗&#xff01;比心&#x1f49e;️ 以图搜图 • &#x1f916; Mo…

【java】10.面向对象

一、类和对象 1.1 类和对象的理解 客观存在的事物皆为对象 &#xff0c;所以我们也常常说万物皆对象。 * 类 * 类的理解 * 类是对现实生活中一类具有共同属性和行为的事物的抽象 * 类是对象的数据类型&#xff0c;类是具有相同属性和行为的一组对象的集合 * 简单理解&am…

C#、.NET版本、Visual Studio版本对应关系及Visual Studio老版本离线包下载地址

0、写这篇文章的目的 由于电脑的环境不同&#xff0c;对于一个老电脑找到一个适配的vscode环境十分不易。总结一下C#、.NET、Visual Studio版本的对应关系&#xff0c;及各个版本Visual Studio的下载地址供大家参考 1、C#、.NET版本、Visual Studio版本对应关系如下 2、Visua…

使用paddleocr

paddle快速开始 具体安装流程 安装shapely库报错怎么办&#xff1f; 选定下载paddleocr2.2时报错 原因是因为python版本不支持&#xff1a; 之后重新创建新的环境&#xff0c;安装python3.8再来一遍 【重新选取对应whl文件&#xff0c;确认文件名是否可用】 之后是可以了…

ARM Coresight 系列文章 11.1 -- CoreSight Cortex-M33 CTI 详细介绍】

请阅读【ARM Coresight SoC-400/SoC-600 专栏导读】 文章目录 CTI 的工作原理CTI 主要特点CTI的使用场景CTI 的工作原理 CTI 允许不同的调试和追踪组件之间基于特定事件进行交互。例如,当一个断点被命中时,CTI 可以用来触发内存的追踪捕捉或者外部仪器的行为,反之亦然。这种…

C#多态性

文章目录 C#多态性静态多态性函数重载函数重载 动态多态性运行结果 C#多态性 静态多态性 在编译时&#xff0c;函数和对象的连接机制被称为早期绑定&#xff0c;也被称为静态绑定。C# 提供了两种技术来实现静态多态性。分别为&#xff1a; 函数重载 运算符重载 运算符重载将…

iPhone语音备忘录误删?掌握这几个技巧轻松恢复【详】

语音备忘录是一款强大的应用程序&#xff0c;它允许用户使用语音输入功能来快速记录想法、提醒、待办事项等。无论是在行进间、工作中还是日常生活中&#xff0c;语音备忘录都是一个非常实用的工具&#xff0c;可以帮助您随时随地记录重要信息&#xff0c;而无需打字或者手动输…

什么是Vector Database?

此为看完视频What is a Vector Database?后的笔记。 作者首先对数据库做了分类&#xff0c;其中RTweb表示real time web app。 然后对用例做了分类&#xff0c;最后一个就是适合于AI的近似搜索。 好处&#xff0c;包括灵活性&#xff0c;可扩展性和性价比。 本视频最重要的…

数据清洗(一)Excel

一、引言 线上出现问题之后的数据清洗是少不了的&#xff0c;有的可以直接通过接口或者mq补偿&#xff0c;有的写sql更新db就可以&#xff0c;但是在匹配关系比较复杂的时候就需要建立临时表做关联匹配&#xff0c;数据量不大可以直接用excel进行匹配。 二、Excel清洗数据 作者…

Windows系统服务器宝塔面板打开提示Internal Server Error错误

1、cmd运行bt命令 2、尝试输入16修复程序 3、如果不行&#xff0c;输入17升级程序

你知道弧幕影院如何制作吗?其应用领域竟如此广泛!

“沉浸式”作为如今备受热议的内容展示形式&#xff0c;其有着多种可实现的途径&#xff0c;其中弧幕影院作为一项有着独特视觉效果、沉浸式观影体验的技术类型&#xff0c;便是大多数影院、主题公园等娱乐场景的必备设计展项&#xff0c;这种弧幕影院通常使用大型的半圆形屏幕…

PyQt:实现菜单栏的点击拖动效果

一、整体步骤 1.设计UI文件 2.调用显示 3.效果展示 二、设计UI文件 1.添加 Scroll Area控件&#xff0c;作为菜单栏的布置区域 2.设置 Scroll Area控件的属性 3.Scroll Area控件内放置 按钮控件 组成菜单栏 此处&#xff0c;放置了需要了6个按钮&#xff0c;并设置按钮的固…

YoloV8改进策略:BackBone改进|PKINet

摘要 PKINet是面向遥感旋转框的主干,网络包含了CAA、PKI等模块,给我们改进卷积结构的模型带来了很多启发。本文,使用PKINet替代YoloV8的主干网络,实现涨点。PKINet是我在作者的模型基础上,重新修改了底层的模块,方便大家轻松移植到YoloV8上。 论文:《Poly Kernel Ince…

科学认识并正确运用人工智能技术赋能国际传播

以下文章来源&#xff1a;学习时报 加强国际传播能力建设&#xff0c;全面提升国际传播效能&#xff0c;形成同我国综合国力和国际地位相匹配的话语权&#xff0c;已成为实现中国式现代化需要解决好的一个重大问题。文生视频模型Sora&#xff0c;是继ChatGPT之后又一推动传播智…

SinoDB系统数据库

在SinoDB数据库的一个实例中&#xff0c;存在多个数据库&#xff0c;分为系统数据库和用户数据库。系统数据库在实例初始化时自动创建&#xff0c;存放实例级别上的监控信息、数据字典信息&#xff0c;用户能够访问而不能修改这些数据。用户数据库由用户根据需要创建&#xff0…

MyBatis3源码深度解析(十九)MyBatis日志实现

文章目录 前言第七章 MyBatis日志实现7.1 Java日志体系7.1.1 常用日志框架7.1.2 Java日志发展史7.1.3 日志接口与日志实现的绑定 7.2 MyBatis日志实现7.2.1 Log接口7.2.2 LogFactory工厂7.2.3 MyBatis日志自动查找7.2.4 MyBatis日志类型配置 7.3 小结 前言 日志是Java应用中必…

信驰达车规蓝牙模块RF-BM-2642QB1I赋能汽车T-Box

近年来&#xff0c;随着人们对数据传输需求的增长&#xff0c;传统网络布线的通讯方式逐渐显现出满足不了的局限性&#xff0c;与此同时&#xff0c;各种无线传输技术迅速发展。汽车工业同样需要无线通讯技术&#xff0c;但红外技术、802.11、HomeRF等技术在汽车工业中存在一定…

axure和蓝湖上查看页面的说明和上传文件

蓝湖上传文件 入口 可添加链接和文件 文件可添加 PDF&#xff0c;word&#xff0c;Excel等&#xff0c;不能添加压缩包&#xff0c;可在线预览文件内容 axure元件说明 在原型上添加说明 axure发布页 axure预览页或发布到axure的服务器上&#xff0c;查看页面说明的方法 点…