v-for循环生成的盒子只改变当前选中的盒子的样式

news/2025/1/31 9:20:54/

1.给盒子添加动态属性:class="[index === isActive?'active-box':'choose-box']"

  <div   v-for="(item,index) in zyList"  :key="item.sid"  :class="[index === isActive?'active-box':'choose-box']"   @click="getKmList(item,index)"><p>{{item.kskm}} 专业</p><div class="choose-content"><el-button type="text" size="mini" icon="far fa-building" style="color:var(--base-color-text)">场次 <span class="num">{{item.ypcc}}</span></el-button><el-button type="text" size="mini" icon="far fa-user" style="color:var(--base-color-text)">已排人次 <span class="num">{{item.yprc}}/{{item.zrc}}</span></el-button></div></div>

2.控制选中的盒子的样式:this.isActive = index;

...data() {return {isActive:0, }methods: {//盒子点击事件getKmList(e,index){this.kskm = e.kskm;this.isActive = index;getRequest(this.url.kmList,{kskm:this.kskm}).then(res=>{if (res.status){this.kmList = res.data;}})},}

3.css代码,准备两个样式切换就行

.active-box{
...
}
.choose-box{
...
}

http://www.ppmy.cn/news/1014877.html

相关文章

Java基础(七)排序算法

排序 1. 冒泡排序 >> 冒泡排序的思想 冒泡排序是一种简单的排序算法&#xff0c;其基本思想是通过多次遍历待排序序列&#xff0c;依次比较相邻的元素并交换位置&#xff0c;使得每次遍历后最大&#xff08;或最小&#xff09;的元素冒泡到序列的末尾。具体步骤如下&a…

JMeter命令行执行+生成HTML报告

1、为什么用命令行模式 使用GUI方式启动jmeter&#xff0c;运行线程较多的测试时&#xff0c;会造成内存和CPU的大量消耗&#xff0c;导致客户机卡死&#xff1b; 所以一般采用的方式是在GUI模式下调整测试脚本&#xff0c;再用命令行模式执行&#xff1b; 命令行方式支持在…

Clion开发STM32之HAL库SPI封装(基础库)

前言 引用参考: Clion开发STM32之HAL库GPIO宏定义封装(最新版) 头文件 /******************************************************************************** Copyright (c) [scl]。保留所有权利。* 本文仅供个人学习和研究使用&#xff0c;禁止用于商业用途。******…

ABAP: DEFINE 宏定义 代码段重用

1、宏定义用法 &1、&2 表示占位符&#xff0c;定义块里面可以有逻辑&#xff0c;例如如果第一位是空&#xff0c;对变量进行赋值。 DEFINE message_test.IF &1 IS INITIAL.lv_type E.lv_msg |{ lv_msg }{ &2 }|.ENDIF.END-OF-DEFINITION. 2、调用宏 如何进…

linux文本三剑客---grep,sed,awk

目录 grep 什么是grep&#xff1f; grep实例演示 命令参数&#xff1a; 案例演示&#xff1a; sed 概念&#xff1a; 常用选项&#xff1a; 案例演示&#xff1a; awk 概念&#xff1a; awk常用命令选项&#xff1a; awk变量&#xff1a; 内置变量 自定义变量 a…

MVSnet点云定量评估指标总结

根据MVSnet论文[1]原文说明&#xff0c;点云评估主要从准确性和完整性两个方面来评估。 针对准确性的评估&#xff0c;采用平均距离指标来度量&#xff0c;具体指标分别为Acc、Comp、overall&#xff0c;准确性指标越低越好&#xff0c;表示R与G之间的距离越小&#xff0c;恢复…

【Linux 网络】网络层协议之IP协议

IP协议 IP协议所处的位置网络层要解决的问题IP协议格式分片与组装网段划分特殊的IP地址IP地址的数量限制私网IP地址和公网IP地址路由 IP协议所处的位置 IP指网际互连协议&#xff0c;Internet Protocol的缩写&#xff0c;是TCP/IP体系中的网络层协议。 网络层要解决的问题 网络…

20230807在WIN10下使用python3将TXT文件转换为DOCX(在UTF8编码下转换为DOCX有多一行的瑕疵)

20230807在WIN10下使用python3将TXT文件转换为DOCX&#xff08;在UTF8编码下转换为DOCX有多一行的瑕疵&#xff09; 2023/8/7 12:58 https://translate.google.com/?slen&tlzh-CN&opdocs 缘起&#xff0c;由于google的文档翻译不支持SRT/TXT格式的字幕&#xff0c;因此…