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中,可以使用CSS伪类选择器和动态样式绑定来实现点击某个元素时改变其颜色的效果。假设有四个元素分别为A、B、C和D。 首先,为这四个元素添加一个共同的类名,例如"item"。 然后,在页面的样式中定义两种颜色&am…...
Springcloud笔记(2)-Eureka服务注册
Eureka服务注册 服务注册,发现。 在Spring Cloud框架中,Eureka的核心作用是服务的注册和发现,并实现服务治理。 Eureka包含两个组件:Eureka Server和Eureka Client。 Eureka Server提供服务注册服务,各个节点启动后…...
国庆 day 5
QT实现TCP服务器客户端搭建的代码,现象 服务器 #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 参考模型应用层表示层会话层传输层网络层数据链路层物理层 参考视频:王道计算机考研 计算机网络 参考书:《2022年计算机网络考研复习指导》 计算机网络 | OSI 参考模型 OSI 参考模型自下而上分为7层&…...
uniapp 实现地图头像上的水波纹效果
最近实现了uniapp 地图头像水波纹的效果,话不多说,先来看看视频效果吧:链接 在这里具体的代码就不放出来了,还是利用了uniapp的 uni.createAnimation 方法,因为cover-view 不支持一些css 的动画效果,所以这…...
Zabbix7.0 LTS新功能
一、简介 LTS是长期支持。LTS版本支持5年。如果更喜欢稳定性,未涉及到最新的功能,可以选次新的LTS或者更低解决方案。而Zabbix6.4是最新的主要版本不属于LTS版本。 二、新功能 从以下几个方面介绍部分新功能: 性能提升:内存储存…...
充电100%并非都是美事,有时少点更有溢出!如何正确为iPhone充电
iPhone是非凡的设备,但一旦电池耗尽,它们就会失去光泽。这就是为什么照看电池内部并确保始终正确充电很重要。 在这篇文章中,我们解释了如果你想让你的iPhone每天运行到深夜,并尽可能多地保持这种状态,你需要采取的步…...
【软件测试】JUnit详解
文章目录 一. Junit是什么?二.Junit中常见的注解1. Test2. BeforeAll & AfterAll3. BeforeEach & AfterEach4. ParameterizedTest参数化5. Disabled6. Order 三. 测试套件1. 通过class运行测试用例2. 通过包运行测试用例 四. 断言 一. Junit是什么? JUnit是一个用于…...
hive统计页面停留时间
1、背景:通过业务埋点数据,统计用户在页面的停留时间 样例数据,样例数据存入表tmp, 有如下字段用户uid、动作时间戳time、页面名称pn、动作名称action SELECT 12345 AS uid, 1695613731020 AS time, 搜索 AS pn, click AS acti…...
LeetCode 24.两两交换链表中的结点
题目链接 力扣(LeetCode)官网 - 全球极客挚爱的技术成长平台 题目解析 首先可以特判一下,如果结点数目小于等于1,则直接返回即可,因为数目小于等于1就不需要交换了。 然后我们可以创建一个虚拟的头结点,然…...
【每日一记】OSPF区域划分详讲、划分区域的优点好处
个人名片: 🐼作者简介:一名大二在校生,喜欢编程🎋 🐻❄️个人主页🥇:小新爱学习. 🐼个人WeChat:hmmwx53 🕊️系列专栏:🖼…...
复旦管院启动科创战略,培养科技研发人才,引领未来发展!
今年夏天,600多位优秀的企业家成为复旦大学EMBA 2023级新生。在疫情结束后,他们选择百战归来再读书,重新回到久违的课堂,共同探索科创大时代下企业的商业本质,开启新的学习与人生旅程。复旦大学管理学院院长陆雄文教授…...
Infinity同步
...
C语言:转义字符
目录 话不多说,先上表 \n \? \ \" \\ \t \a \ddd 附一张ASCII表 \xdd 练习 话不多说,先上表 一一举例解释下哈 \n 读取到结尾标识符\0 printf("demo\n\0Zh"); // demo \? 在书写连续多个问号时使用,防止…...
为什么 0.1 + 0.1 !== 0.2
为什么 0.1 0.1 ! 0.2 总结了几个很有意思的基础题目,分享一下。 为什么 0.1 0.1 ! 0.2 看到这个问题,不得不想到计算机中的数据类型,其中浮点数表示有限的精度。那么它就无法精确的表示所有的十进制小数,所以在在某些情况下…...
超详细!主流大语言模型的技术原理细节汇总!
1.比较 LLaMA、ChatGLM、Falcon 等大语言模型的细节:tokenizer、位置编码、Layer Normalization、激活函数等。 2. 大语言模型的分布式训练技术:数据并行、张量模型并行、流水线并行、3D 并行、零冗余优化器 ZeRO、CPU 卸载技术 ZeRo-offload、混合精度训…...
本人4年测试经验,211 本科计算机专业,由于互联网裁员,然后谈谈我最近测试面试的总结
本人4年测试经验,211 本科计算机专业,由于互联网裁员,最近在 bosss 上投了些简历,测试开发岗,看看目前市场情况。 虽然都在说大环境不好,失业的人很多,我最近约面试的还是比较多的,…...
Android中级——Activity数据恢复过程
Activity数据恢复 onSaveInstanceState()onRestoreInstanceState()扩展 onSaveInstanceState() 在Activity调用onStop()之前调用会onSaveInstanceState(),如下 final void performStopActivity(IBinder token, boolean saveState, String reason) {ActivityClient…...
国内就能使用的chatgpt网页版,包含AIGC应用工具
Chatgpt的出现在多个领域带来了重要的影响。它能够显著提高我们的工作效率,无论是编写文案代码还是回答常见问题,都能在短时间内完成任务。通过Chatgpt,我们能够迅速获取所需答案。随着人工智能技术的不断发展,相信在未来AI能够带…...
Fast DDS之RTPS
目录 RTPS的使用 RTPS层实现了RTPS标准。DDS层概念映射关系如下: DDS LayerRTPS LayerDomainRTPSDomainDomainParticipantRTPSParticipantDataWriterRTPSWriterDataReaderRTPSReader RTPS的使用...
超短脉冲激光自聚焦效应
前言与目录 强激光引起自聚焦效应机理 超短脉冲激光在脆性材料内部加工时引起的自聚焦效应,这是一种非线性光学现象,主要涉及光学克尔效应和材料的非线性光学特性。 自聚焦效应可以产生局部的强光场,对材料产生非线性响应,可能…...
进程地址空间(比特课总结)
一、进程地址空间 1. 环境变量 1 )⽤户级环境变量与系统级环境变量 全局属性:环境变量具有全局属性,会被⼦进程继承。例如当bash启动⼦进程时,环 境变量会⾃动传递给⼦进程。 本地变量限制:本地变量只在当前进程(ba…...
CocosCreator 之 JavaScript/TypeScript和Java的相互交互
引擎版本: 3.8.1 语言: JavaScript/TypeScript、C、Java 环境:Window 参考:Java原生反射机制 您好,我是鹤九日! 回顾 在上篇文章中:CocosCreator Android项目接入UnityAds 广告SDK。 我们简单讲…...
linux 下常用变更-8
1、删除普通用户 查询用户初始UID和GIDls -l /home/ ###家目录中查看UID cat /etc/group ###此文件查看GID删除用户1.编辑文件 /etc/passwd 找到对应的行,YW343:x:0:0::/home/YW343:/bin/bash 2.将标红的位置修改为用户对应初始UID和GID: YW3…...
leetcodeSQL解题:3564. 季节性销售分析
leetcodeSQL解题:3564. 季节性销售分析 题目: 表:sales ---------------------- | Column Name | Type | ---------------------- | sale_id | int | | product_id | int | | sale_date | date | | quantity | int | | price | decimal | -…...
学习STC51单片机32(芯片为STC89C52RCRC)OLED显示屏2
每日一言 今天的每一份坚持,都是在为未来积攒底气。 案例:OLED显示一个A 这边观察到一个点,怎么雪花了就是都是乱七八糟的占满了屏幕。。 解释 : 如果代码里信号切换太快(比如 SDA 刚变,SCL 立刻变&#…...
10-Oracle 23 ai Vector Search 概述和参数
一、Oracle AI Vector Search 概述 企业和个人都在尝试各种AI,使用客户端或是内部自己搭建集成大模型的终端,加速与大型语言模型(LLM)的结合,同时使用检索增强生成(Retrieval Augmented Generation &#…...
PAN/FPN
import torch import torch.nn as nn import torch.nn.functional as F import mathclass LowResQueryHighResKVAttention(nn.Module):"""方案 1: 低分辨率特征 (Query) 查询高分辨率特征 (Key, Value).输出分辨率与低分辨率输入相同。"""def __…...
基于Java+VUE+MariaDB实现(Web)仿小米商城
仿小米商城 环境安装 nodejs maven JDK11 运行 mvn clean install -DskipTestscd adminmvn spring-boot:runcd ../webmvn spring-boot:runcd ../xiaomi-store-admin-vuenpm installnpm run servecd ../xiaomi-store-vuenpm installnpm run serve 注意:运行前…...
OD 算法题 B卷【正整数到Excel编号之间的转换】
文章目录 正整数到Excel编号之间的转换 正整数到Excel编号之间的转换 excel的列编号是这样的:a b c … z aa ab ac… az ba bb bc…yz za zb zc …zz aaa aab aac…; 分别代表以下的编号1 2 3 … 26 27 28 29… 52 53 54 55… 676 677 678 679 … 702 703 704 705;…...
