vue3自定义按钮点击变颜色(切换)

news2024/12/23 9:58:18

实现效果图: 默认选中第一个按钮,未选中按钮为粉色,点击时颜色变为红色在这里插入图片描述
利用动态类名,当定义isChange数值和下标index相同时,赋予act类名,实现变色效果

<template>
	<view class="page">
		<view class="btns" v-for="(item, index) in 6">
			<view class="btn" :class="{ act: isChange === index }" @click="change(index)">按钮{{ index + 1 }}</view>
		</view>
	</view>
</template>
<script>
import { ref } from 'vue';
export default {
	setup() {
		const isChange = ref(0);
		const change = ty => {
			isChange.value = ty;
		};
		return { isChange, change };
	}
};
</script>
<style>
.page {
	padding: 50px;
	display: flex;
	flex-wrap: wrap;
}
 
.btn {
	width: 60px;
	height: 30px;
	background-color: pink;
	margin: 10px;
}
.act {
	background-color: red;
}
</style>

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

如若内容造成侵权/违法违规/事实不符,请联系多彩编程网进行投诉反馈,一经查实,立即删除!

相关文章

FPGA 多路分频器实验

1 概述 在 FPGA 中&#xff0c;时钟分频是经常用到的。本节课讲解 2 分频、3 分频、4 分频和 8 分频的 Verilog 实现并且学习 generate 语法功能的应。 2 程序设计思路 1&#xff09;整数倍分频&#xff0c;为 2、4、8&#xff0c;这种 2^n 次方倍数倍数关系的…

Spring Security 中 Authentication和Authorization的区别

Authentication Spring Security提供了全面的认证支持。认证是用来验证试图访问特定资源的用户身份的方式。验证用户的常见方式是要求用户输入用户名和密码。一旦认证完成&#xff0c;我们就知道了用户的身份并且可以进行授权。 Spring Security内置支持对用户进行认证。 简…

el-date-picker如果超过限制跨度则提示

需求&#xff1a;实现日期时间选择组件跨度如果超过限制天数&#xff0c;点击查询则提示超过限制时间 封装一个方法&#xff0c;传入开始和结束时间以及限制天数&#xff0c;如果超过则返回false //计算时间跨度是否超过限制天数isTimeSpanWithinLimit(startTime, endTime, li…

Android Text View 去掉默认的padding的实现方法

先看下最终实现效果&#xff0c;满意您在往下看&#xff1a; TextView 绘制的时候自带一定的Padding值&#xff0c;要想实现去掉默认的padding值&#xff0c;xml文件可以设置一个属性值 &#xff1a; android:includeFontPadding"false" 然后运行起来就会发现&…

【C++干货铺】红黑树 (Red Black Tree)

个人主页点击直达&#xff1a;小白不是程序媛 C系列专栏&#xff1a;C干货铺 代码仓库&#xff1a;Gitee 目录 前言 红黑树的概念 红黑树的性质 红黑树结点的定义 红黑树的插入操作 插入新的结点 检查规则进行改色 情况一 情况二 情况三 插入完整代码 红黑树的验…

ArcGIS Pro 如何新建布局

你是否已经习惯了在ArcGIS中数据视图和布局视图之间来回切换&#xff0c;到了ArcGIS Pro中却找不到二者之间切换的按钮&#xff0c;即使新建布局后却发现地图怎么却是一片空白。 这一切的一切都是因为ArcGIS Pro的功能框架完全不同&#xff0c;这里为大家介绍一下在ArcGIS Pro…

纸黄金实战投资技巧:避免亏损的有效策略

在纸黄金交易的实战中&#xff0c;避免亏损是每位投资者都追求的目标。虽然任何投资都存在一定的风险&#xff0c;但采取一些有效的策略可以帮助投资者最大限度地减少亏损的可能性。以下是一些在纸黄金交易中避免亏损的实战技巧&#xff1a; 一、设定止损点是避免亏损的关键 止…

【Android】自定义View onDraw()方法会调用两次

问题 自定义了View后&#xff0c;在构造函数中设置画笔颜色&#xff0c;发现它没起效&#xff0c;但是在onDraw()里设置颜色就会起效&#xff0c;出问题的代码如下&#xff1a; public RoundSeekbarView(Context context, Nullable AttributeSet attrs) {super(context, attrs…

dubbo入门案例!!!

入门案例之前我们先介绍一下&#xff1a;zookeeper。 Zookeeper是Apacahe Hadoop的子项目&#xff0c;可以为分布式应用程序协调服务&#xff0c;适合作为Dubbo服务的注册中心&#xff0c;负责服务地址的注册与查找&#xff0c;相当于目录服务&#xff0c;服务提供者和消费者只…

考下初级会计证书,好处竟有这么多!柯桥学会计去哪里?零基础入门手把手教学

初级会计证书有什么用&#xff1f; 初级会计证书有什么用&#xff1f;往下看&#xff0c;看完还没报名的建议大家赶紧报名&#xff0c;今年拿下&#xff01;因为初级会计证书真的很有用&#xff01; 01 求职刚需 初级会计是会计职业的起点&#xff0c;很多会计基础岗位&#x…

rust跟我学六:虚拟机检测

图为RUST吉祥物 大家好,我是get_local_info作者带剑书生,这里用一篇文章讲解get_local_info是怎么检测是否在虚拟机里运行的。 首先,先要了解get_local_info是什么? get_local_info是一个获取linux系统信息的rust三方库,并提供一些常用功能,目前版本0.2.4。详细介绍地址:…

关于Jenkins安装后,插件管理中插件版本依赖报错问题的解决方法

我们在初次安装完Jenkins后&#xff0c;通常会去下载要使用的插件&#xff0c;但是在插件管理中通常会出现插件版本问题的提示&#xff0c;例如&#xff1a; 此类问题一般可通过升级Jenkins到最新版本来解决问题。但是Jenkins从旧版本升级到最新版本&#xff0c;望望可能会连…

redis安装-Linux为例

可以下载一个Shell或者MobaXterm工具&#xff0c;便于操作 在redis官网下载压缩包 开始安装 安装依赖 yum install -y gcc tcl切换目录 切换目录后直接把redis安装包拖到/user/local/src/下 cd /user/local/src/解压然后安装 #解压 tar -zxvf redis-7.2.4.tar.gz #安装 …

并发编程之MESI缓存一致性协议

目录 CPU缓存架构 CPU多核缓存架构 CPU缓存架构缓存一致性的解决方案 缓存一致性协议实现原理 总线窥探 工作原理 窥探协议类型 缓存一致性协议 MESI协议 伪共享问题 CPU缓存架构 CPU缓存即高速缓冲存储器&#xff0c;是位于CPU与主内存间的一种容量较小但速度很高的…

如何在MinIO存储服务中通过Buckets实现远程访问管理界面上传文件

文章目录 前言1. 创建Buckets和Access Keys2. Linux 安装Cpolar3. 创建连接MinIO服务公网地址4. 远程调用MinIO服务小结5. 固定连接TCP公网地址6. 固定地址连接测试 前言 MinIO是一款高性能、分布式的对象存储系统&#xff0c;它可以100%的运行在标准硬件上&#xff0c;即X86等…

Halcon基于相关性的模板匹配

Halcon基于相关性的模板匹配 基于相关性的模板匹配其实是另一种基于灰度值的匹配&#xff0c;不过它的特点是使用一种归一化的互相关匹配&#xff08;Normalized Cross Correlation&#xff0c;NCC&#xff09;来衡量模板图像和检测图像之间的关系&#xff0c;因此&#xff0c…

前端实现轮训和长连接

简介 轮训和长连接相关内容可以参考之前的文章消息推送系统。消息推送系统-CSDN博客文章浏览阅读106次。在餐饮行业中&#xff0c;店内应用有pos、厨显屏等&#xff0c;云端应用为对应数据中心。为了实现云端数据和操作指令下发到店内应用&#xff0c;需要有一个系统实现这个功…

“重大利好”!以太坊坎昆升级临近!Layer2新玩家Blast不断蚕食市场份额,令竞品汗流浃背?

1月17日&#xff0c;坎昆升级&#xff08;Dencun&#xff09;率先在以太坊Goerli测试网启动&#xff0c;由于Goerli是参与者数量以及网络负载程度最高的测试网&#xff0c;仅次于以太坊主网&#xff0c;因此如果没什么问题&#xff0c;预示着主网升级已经不远。 而现在&#xf…

「alias」Linux 给命令起别名,自定义bash命令

0. 背景 Arch 系统没有 ll命令,在其他发行版用惯了一时间没有真不习惯,来配置一下吧! 1. 全局配置 我希望 ll 命令可以被所有人使用,所以应该配置在全局的bash配置文件中,一般这个全局bash配置文件在: /etc/bash.bashrc 切好管理员权限后,命令如下 echo “alias ll‘ls -l -…

QuestDB时序数据库快速入门

简介 QuestDB是一个开源的高性能时序数据库&#xff0c;专门用于处理时间序列相关的数据存储与查询&#xff1b; QuestDB使用列式存储模型。数据存储在表中&#xff0c;每列存储在其自己的文件和其自己的本机格式中。新数据被附加到每列的底部&#xff0c;以便能够按照与摄取…