v-for循环里面的点击事件控制div的显示与隐藏

news/2024/4/24 13:24:03

1、在页面写好循环和点击事件(点击事件带上参数index)

<template><div v-for="(item,index) in List" :key="index"><div @click="change(index)">{{ item.name }}</div><div>{{ item.age }}</div></div>
</template>

2、给从后台获取的数据添加一个自定义参数 flag

 // 网络请求方法async getuserList() {           const res = await this.$http.get('')if (res.status == 200) {res.data.list.forEach((item) => {item.flag = falseres.data.list.push(item)})}},

根据自定义的参数状态来控制div的显示与隐藏

// 点击事件change(index) {if(this.list[index].flag == false) {this.list[index].flag = true} else {this.list[index].flag = false}}

4、在div上写上判断条件

<template><div v-for="(item,index) in List" :key="index"><div @click="change(index)">{{ item.name }}</div><div v-if="item.flag== true">{{ item.age }}</div></div>
</template>

保证有效,亲测有效


https://www.xjx100.cn/news/344707.html

相关文章

Java JDK 版本管理工具之Jabba JEnv使用

文章目录 Java JDK 版本管理工具JEnv介绍下载地址配置环境变量到Path上使用JEnv添加JDK查看已经添加的JDK切换JDK版本 Jabba前言安装Jabba常用命令查看服务器上可下载安装的Jdk版本添加本地jdk查询所有安装的JDK版本安装JDK安装 Oracle JDK安装 Oracle Server JRE安装 Adopt Op…

旋翼无人机常用仿真工具

四旋翼常用仿真工具 rviz&#xff1a; 简单的质点&#xff08;也可以加上动力学姿态&#xff09;&#xff0c;用urdf模型在rviz中显示无人机和飞行轨迹、地图等。配合ROS代码使用&#xff0c;轻量化适合多机。典型的比如浙大ego-planner的仿真&#xff1a; https://github.c…

shiro环境搭建

源码部署 这种方法相对复杂&#xff0c;如果不需要分析源码直接用docker就行 前置条件&#xff1a;Maven Ideal Tomcat 下载方式1&#xff1a;https://codeload.github.com/apache/shiro/zip/shiro-root-1.2.4&#xff0c;然后将文件夹导入ideal下载方式2&#xff1a;将shiro…

评奖系统设计

系列文章 任务40 评奖系统设计 文章目录 系列文章一、实践目的与要求1、目的2、要求 二、课题任务三、总体设计1.存储结构及数据类型定义2.程序结构3.所实现的功能函数4、程序流程图 四、小组成员及分工五、 测试执行完毕程序展示成功&#xff01;学生投票&#xff0c;举例第一…

分布式事务解决方案-Seata

分布式事务解决方案-Seata 1.分布式事务问题1.1.本地事务1.2.分布式事务1.3.演示分布式事务问题 2.理论基础2.1.CAP定理2.1.1.一致性2.1.2.可用性2.1.3.分区容错2.1.4.矛盾 2.2.BASE理论2.3.解决分布式事务的思路 3.初识Seata3.1.Seata的架构3.2.部署TC服务3.3.微服务集成Seata…

C++多态详解(虚函数重写、接口继承、虚函数表详解)

目录 1. 多态概念 2. 多态的定义及实现 2.1 多态的构成条件 2.2 虚函数重写 2.3 C11 override和final 2.4 重载、覆盖&#xff08;重写&#xff09;、隐藏&#xff08;重定义&#xff09;的对比 3. 抽象类 3.1 概念 3.2 接口继承和实现继承 4. 多态的原理 4.1 虚函数表 4.2…

编程练习【判断两个时间是否存在冲突】

给你两个字符串数组 event1 和 event2 &#xff0c;表示发生在同一天的两个闭区间时间段事件&#xff0c;其中&#xff1a; event1 [startTime1, endTime1] 且 event2 [startTime2, endTime2] 事件的时间为有效的 24 小时制且按 HH:MM 格式给出。 当两个事件存在某个非空的…

一、尚医通预约下单

文章目录 一、预约下单1、需求分析1.1订单表结构1.2下单分析 2、搭建service-order模块2.1 搭建service-order模块2.2 修改配置2.3 启动类2.4配置网关 3、添加订单基础类3.1 添加model3.2 添加Mapper3.3 添加service接口及实现类3.4 添加controller 4、封装Feign调用获取就诊人…