当前位置: 首页 > news >正文

uniapp四个元素点击那个哪个变色,其他的还变原来的颜色

在UniApp中,可以使用CSS伪类选择器和动态样式绑定来实现点击某个元素时改变其颜色的效果。假设有四个元素分别为A、B、C和D。

首先,为这四个元素添加一个共同的类名,例如"item"。

然后,在页面的样式中定义两种颜色,一种是原始颜色,另一种是点击后的变色。

<style>.item {background-color: 原始颜色;}.item.active {background-color: 点击后的变色;}
</style>

接下来,在Vue组件中,使用v-for指令遍历渲染这四个元素,并为每个元素添加一个点击事件

<template><div><div v-for="(item, index) in itemList":key="index":class="{ 'item': true, 'active': activeIndex === index }"@click="changeColor(index)">{{ item }}</div></div>
</template><script>
export default {data() {return {itemList: ['A', 'B', 'C', 'D'],activeIndex: null};},methods: {changeColor(index) {this.activeIndex = index;}}
};
</script>

相关文章:

uniapp四个元素点击那个哪个变色,其他的还变原来的颜色

在UniApp中&#xff0c;可以使用CSS伪类选择器和动态样式绑定来实现点击某个元素时改变其颜色的效果。假设有四个元素分别为A、B、C和D。 首先&#xff0c;为这四个元素添加一个共同的类名&#xff0c;例如"item"。 然后&#xff0c;在页面的样式中定义两种颜色&am…...

Springcloud笔记(2)-Eureka服务注册

Eureka服务注册 服务注册&#xff0c;发现。 在Spring Cloud框架中&#xff0c;Eureka的核心作用是服务的注册和发现&#xff0c;并实现服务治理。 Eureka包含两个组件&#xff1a;Eureka Server和Eureka Client。 Eureka Server提供服务注册服务&#xff0c;各个节点启动后…...

国庆 day 5

QT实现TCP服务器客户端搭建的代码&#xff0c;现象 服务器 #include "widget.h" #include "ui_widget.h"Widget::Widget(QWidget *parent): QWidget(parent), ui(new Ui::Widget) {ui->setupUi(this);server new QTcpServer(this);connect (server,&…...

计算机网络 | OSI 参考模型

计算机网络 | OSI 参考模型 计算机网络 | OSI 参考模型应用层表示层会话层传输层网络层数据链路层物理层 参考视频&#xff1a;王道计算机考研 计算机网络 参考书&#xff1a;《2022年计算机网络考研复习指导》 计算机网络 | OSI 参考模型 OSI 参考模型自下而上分为7层&…...

uniapp 实现地图头像上的水波纹效果

最近实现了uniapp 地图头像水波纹的效果&#xff0c;话不多说&#xff0c;先来看看视频效果吧&#xff1a;链接 在这里具体的代码就不放出来了&#xff0c;还是利用了uniapp的 uni.createAnimation 方法&#xff0c;因为cover-view 不支持一些css 的动画效果&#xff0c;所以这…...

Zabbix7.0 LTS新功能

一、简介 LTS是长期支持。LTS版本支持5年。如果更喜欢稳定性&#xff0c;未涉及到最新的功能&#xff0c;可以选次新的LTS或者更低解决方案。而Zabbix6.4是最新的主要版本不属于LTS版本。 二、新功能 从以下几个方面介绍部分新功能&#xff1a; 性能提升&#xff1a;内存储存…...

充电100%并非都是美事,有时少点更有溢出!如何正确为iPhone充电

iPhone是非凡的设备&#xff0c;但一旦电池耗尽&#xff0c;它们就会失去光泽。这就是为什么照看电池内部并确保始终正确充电很重要。 在这篇文章中&#xff0c;我们解释了如果你想让你的iPhone每天运行到深夜&#xff0c;并尽可能多地保持这种状态&#xff0c;你需要采取的步…...

【软件测试】JUnit详解

文章目录 一. Junit是什么?二.Junit中常见的注解1. Test2. BeforeAll & AfterAll3. BeforeEach & AfterEach4. ParameterizedTest参数化5. Disabled6. Order 三. 测试套件1. 通过class运行测试用例2. 通过包运行测试用例 四. 断言 一. Junit是什么? JUnit是一个用于…...

hive统计页面停留时间

1、背景&#xff1a;通过业务埋点数据&#xff0c;统计用户在页面的停留时间 样例数据&#xff0c;样例数据存入表tmp&#xff0c; 有如下字段用户uid、动作时间戳time、页面名称pn、动作名称action SELECT 12345 AS uid, 1695613731020 AS time, 搜索 AS pn, click AS acti…...

LeetCode 24.两两交换链表中的结点

题目链接 力扣&#xff08;LeetCode&#xff09;官网 - 全球极客挚爱的技术成长平台 题目解析 首先可以特判一下&#xff0c;如果结点数目小于等于1&#xff0c;则直接返回即可&#xff0c;因为数目小于等于1就不需要交换了。 然后我们可以创建一个虚拟的头结点&#xff0c;然…...

【每日一记】OSPF区域划分详讲、划分区域的优点好处

个人名片&#xff1a; &#x1f43c;作者简介&#xff1a;一名大二在校生&#xff0c;喜欢编程&#x1f38b; &#x1f43b;‍❄️个人主页&#x1f947;&#xff1a;小新爱学习. &#x1f43c;个人WeChat&#xff1a;hmmwx53 &#x1f54a;️系列专栏&#xff1a;&#x1f5bc…...

复旦管院启动科创战略,培养科技研发人才,引领未来发展!

今年夏天&#xff0c;600多位优秀的企业家成为复旦大学EMBA 2023级新生。在疫情结束后&#xff0c;他们选择百战归来再读书&#xff0c;重新回到久违的课堂&#xff0c;共同探索科创大时代下企业的商业本质&#xff0c;开启新的学习与人生旅程。复旦大学管理学院院长陆雄文教授…...

Infinity同步

...

C语言:转义字符

目录 话不多说&#xff0c;先上表 \n \? \ \" \\ \t \a \ddd 附一张ASCII表 \xdd 练习 话不多说&#xff0c;先上表 一一举例解释下哈 \n 读取到结尾标识符\0 printf("demo\n\0Zh"); // demo \? 在书写连续多个问号时使用&#xff0c;防止…...

为什么 0.1 + 0.1 !== 0.2

为什么 0.1 0.1 ! 0.2 总结了几个很有意思的基础题目&#xff0c;分享一下。 为什么 0.1 0.1 ! 0.2 看到这个问题&#xff0c;不得不想到计算机中的数据类型&#xff0c;其中浮点数表示有限的精度。那么它就无法精确的表示所有的十进制小数&#xff0c;所以在在某些情况下…...

超详细!主流大语言模型的技术原理细节汇总!

1.比较 LLaMA、ChatGLM、Falcon 等大语言模型的细节&#xff1a;tokenizer、位置编码、Layer Normalization、激活函数等。 2. 大语言模型的分布式训练技术&#xff1a;数据并行、张量模型并行、流水线并行、3D 并行、零冗余优化器 ZeRO、CPU 卸载技术 ZeRo-offload、混合精度训…...

本人4年测试经验,211 本科计算机专业,由于互联网裁员,然后谈谈我最近测试面试的总结

本人4年测试经验&#xff0c;211 本科计算机专业&#xff0c;由于互联网裁员&#xff0c;最近在 bosss 上投了些简历&#xff0c;测试开发岗&#xff0c;看看目前市场情况。 虽然都在说大环境不好&#xff0c;失业的人很多&#xff0c;我最近约面试的还是比较多的&#xff0c;…...

Android中级——Activity数据恢复过程

Activity数据恢复 onSaveInstanceState()onRestoreInstanceState()扩展 onSaveInstanceState() 在Activity调用onStop()之前调用会onSaveInstanceState()&#xff0c;如下 final void performStopActivity(IBinder token, boolean saveState, String reason) {ActivityClient…...

国内就能使用的chatgpt网页版,包含AIGC应用工具

Chatgpt的出现在多个领域带来了重要的影响。它能够显著提高我们的工作效率&#xff0c;无论是编写文案代码还是回答常见问题&#xff0c;都能在短时间内完成任务。通过Chatgpt&#xff0c;我们能够迅速获取所需答案。随着人工智能技术的不断发展&#xff0c;相信在未来AI能够带…...

Fast DDS之RTPS

目录 RTPS的使用 RTPS层实现了RTPS标准。DDS层概念映射关系如下&#xff1a; DDS LayerRTPS LayerDomainRTPSDomainDomainParticipantRTPSParticipantDataWriterRTPSWriterDataReaderRTPSReader RTPS的使用...

Linux 文件类型,目录与路径,文件与目录管理

文件类型 后面的字符表示文件类型标志 普通文件&#xff1a;-&#xff08;纯文本文件&#xff0c;二进制文件&#xff0c;数据格式文件&#xff09; 如文本文件、图片、程序文件等。 目录文件&#xff1a;d&#xff08;directory&#xff09; 用来存放其他文件或子目录。 设备…...

shell脚本--常见案例

1、自动备份文件或目录 2、批量重命名文件 3、查找并删除指定名称的文件&#xff1a; 4、批量删除文件 5、查找并替换文件内容 6、批量创建文件 7、创建文件夹并移动文件 8、在文件夹中查找文件...

关于iview组件中使用 table , 绑定序号分页后序号从1开始的解决方案

问题描述&#xff1a;iview使用table 中type: "index",分页之后 &#xff0c;索引还是从1开始&#xff0c;试过绑定后台返回数据的id, 这种方法可行&#xff0c;就是后台返回数据的每个页面id都不完全是按照从1开始的升序&#xff0c;因此百度了下&#xff0c;找到了…...

STM32标准库-DMA直接存储器存取

文章目录 一、DMA1.1简介1.2存储器映像1.3DMA框图1.4DMA基本结构1.5DMA请求1.6数据宽度与对齐1.7数据转运DMA1.8ADC扫描模式DMA 二、数据转运DMA2.1接线图2.2代码2.3相关API 一、DMA 1.1简介 DMA&#xff08;Direct Memory Access&#xff09;直接存储器存取 DMA可以提供外设…...

linux 下常用变更-8

1、删除普通用户 查询用户初始UID和GIDls -l /home/ ###家目录中查看UID cat /etc/group ###此文件查看GID删除用户1.编辑文件 /etc/passwd 找到对应的行&#xff0c;YW343:x:0:0::/home/YW343:/bin/bash 2.将标红的位置修改为用户对应初始UID和GID&#xff1a; YW3…...

Python+ZeroMQ实战:智能车辆状态监控与模拟模式自动切换

目录 关键点 技术实现1 技术实现2 摘要&#xff1a; 本文将介绍如何利用Python和ZeroMQ消息队列构建一个智能车辆状态监控系统。系统能够根据时间策略自动切换驾驶模式&#xff08;自动驾驶、人工驾驶、远程驾驶、主动安全&#xff09;&#xff0c;并通过实时消息推送更新车…...

Git常用命令完全指南:从入门到精通

Git常用命令完全指南&#xff1a;从入门到精通 一、基础配置命令 1. 用户信息配置 # 设置全局用户名 git config --global user.name "你的名字"# 设置全局邮箱 git config --global user.email "你的邮箱example.com"# 查看所有配置 git config --list…...

从 GreenPlum 到镜舟数据库:杭银消费金融湖仓一体转型实践

作者&#xff1a;吴岐诗&#xff0c;杭银消费金融大数据应用开发工程师 本文整理自杭银消费金融大数据应用开发工程师在StarRocks Summit Asia 2024的分享 引言&#xff1a;融合数据湖与数仓的创新之路 在数字金融时代&#xff0c;数据已成为金融机构的核心竞争力。杭银消费金…...

实战三:开发网页端界面完成黑白视频转为彩色视频

​一、需求描述 设计一个简单的视频上色应用&#xff0c;用户可以通过网页界面上传黑白视频&#xff0c;系统会自动将其转换为彩色视频。整个过程对用户来说非常简单直观&#xff0c;不需要了解技术细节。 效果图 ​二、实现思路 总体思路&#xff1a; 用户通过Gradio界面上…...

沙箱虚拟化技术虚拟机容器之间的关系详解

问题 沙箱、虚拟化、容器三者分开一一介绍的话我知道他们各自都是什么东西&#xff0c;但是如果把三者放在一起&#xff0c;它们之间到底什么关系&#xff1f;又有什么联系呢&#xff1f;我不是很明白&#xff01;&#xff01;&#xff01; 就比如说&#xff1a; 沙箱&#…...