vue3自定义按钮点击变颜色实现(多选功能)

实现效果图: 默认选中第一个按钮,未选中按钮为粉色,点击时颜色变为红色
在这里插入图片描述

利用动态类名,当定义isChange数值和下标index相同时,赋予act类名,实现变色效果

<template><div class="page"><div class="btns" v-for="(item, index) in 6" :key="index"><divclass="btn":class="{ act: isChange.includes(index) }"@click="change(index)">按钮{{ index + 1 }}</div></div></div>
</template>
<script>
import { ref } from 'vue';export default {setup() {const isChange = ref([]);const change = (index) => {if (isChange.value.includes(index)) {// 如果按钮已经被选中,则移除该按钮的索引值isChange.value = isChange.value.filter((item) => item !== index);} else {// 如果按钮未被选中,则添加该按钮的索引值isChange.value.push(index);}};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.mzph.cn/news/639654.shtml

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

相关文章

Elastic Search 8.12:让 Lucene 更快,让开发人员更快

作者&#xff1a;来自 Elastic Serena Chou, Aditya Tripathi Elastic Search 8.12 包含新的创新&#xff0c;可供开发人员直观地利用人工智能和机器学习模型&#xff0c;通过闪电般的快速性能和增强的相关性来提升搜索体验。 此版本的 Elastic 基于 Apache Lucene 9.9&#xf…

re:从0开始的HTML学习之路 2. HTML的标准结构说明

1. <DOCTYPE html> 文档声明&#xff0c;用于告诉浏览器&#xff0c;当前HTML文档采用的是什么版本。 必须写在当前HTML文档的首行&#xff08;可执行代码的首行&#xff09; HTML4的此标签与HTML5不同。 2. <html lang“en”> 根标签&#xff0c;整个HTML文档中…

如何本地部署虚VideoReTalking

环境&#xff1a; Win10专业版 VideoReTalking 问题描述&#xff1a; 如何本地部署虚VideoReTalking 解决方案&#xff1a; VideoReTalking是一个强大的开源AI对嘴型工具&#xff0c;它是我目前使用过的AI对嘴型工具中效果最好的一个&#xff01;它是由西安电子科技大学、…

数据结构学习1 初识泛型

装箱和拆箱 装箱/装包: 把一个基本数据类型转变为包装类型 拆箱/拆包: 把一个包装类型转变为一个基本数据类型 int a 1;Integer i a;// 自动装箱int b i;// 自动拆箱Integer ii Integer.valueOf(a);// 手动装箱&#xff0c;推荐使用 Integer.valueOf() 而不是 new Integer(…

安卓之导致ANR的原因分析,问题定位以及解决方案

一、引言 在Android应用开发中&#xff0c;Application Not Responding&#xff08;ANR&#xff09;是一种常见的性能问题&#xff0c;它直接关系到用户体验的质量。当应用在特定时间段内无法及时响应用户的交互或者系统事件时&#xff0c;系统将会抛出ANR错误&#xff0c;提示…

本地读取Excel文件并进行数据压缩传递到服务器

在项目开发过程中&#xff0c;读取excel文件&#xff0c;可能存在几百或几百万条数据内容&#xff0c;那么对于大型文件来说&#xff0c;我们应该如何思考对于大型文件的读取操作以及性能的注意事项。 类库&#xff1a;Papa Parse - Powerful CSV Parser for JavaScript 第一步…

html中,元素width和height的单位px、cm、mm、in、pc、pt、ch、em、rem、vh、vw、vmin、vmax的含义

在 HTML 中&#xff0c;元素的 width 和 height 属性可以使用多种单位来表示尺寸。下面是这些单位的含义&#xff1a; 像素&#xff08;px&#xff09;&#xff1a;像素是最常见的单位&#xff0c;表示固定的像素值。例如&#xff0c;width: 200px; 表示元素的宽度为 200 像素。…

springboot116基于java的教学辅助平台

简介 【毕设源码推荐 javaweb 项目】基于springbootvue 的基于java的教学辅助平台 适用于计算机类毕业设计&#xff0c;课程设计参考与学习用途。仅供学习参考&#xff0c; 不得用于商业或者非法用途&#xff0c;否则&#xff0c;一切后果请用户自负。 看运行截图看 第五章 第四…

要编译 Qt 的 .pro 工程,可以使用 qmake 和 make 工具

要编译 Qt 的 .pro 工程&#xff0c;可以使用 qmake 和 make 工具。下面是一个基本的 Makefile 示例&#xff0c;用于编译 Qt 的 .pro 工程&#xff1a; # 指定编译器 CXX g # 指定 qmake 命令的路径 QMAKE qmake# 指定目标文件名和可执行文件名 TARGET myapp# 定义源代码文…

R语言入门——多变量移除

目录 0、引言1、单变量删除的例子2、多变量移除2.1 ls的用法 2.2多变量删除 0、引言 有很多小伙伴在运行程序的时候就想在每次循环结束时提出一些占用内存大且无用的数据或变量&#xff0c;或者仅仅保留一些数据&#xff0c;但是rm的语法在删除多变量时候需要和ls()函数联用。…

Java中的深拷贝与浅拷贝

深拷贝与浅拷贝 深拷贝和浅拷贝是编程中常用的两种对象复制方式&#xff0c;它们在复制对象时处理对象内部引用的方式上有所不同。 浅拷贝 浅拷贝&#xff08;Shallow Copy&#xff09;只复制对象的顶层结构&#xff0c;而不复制对象内部的引用对象。换句话说&#xff0c;浅…

基于光口的以太网 udp 回环实验

文章目录 前言一、系统框架整体设计二、系统工程及 IP 创建三、UDP回环模块修改说明四、接口讲解五、顶层模块设计六、下载验证前言 本章实验我们通过网络调试助手发送数据给 FPGA,FPGA通过光口接收数据并将数据使用 UDP 协议发送给电脑。 提示:任何文章不要过度深思!万事万…

从白子画到东方青苍,你选择谁来守护你的修仙之旅?

从白子画到东方青苍,你选择谁来守护你的修仙之旅? 在繁花似锦的修仙世界中&#xff0c;每一位追梦者都渴望有那么一位守护者&#xff0c;与你共患难&#xff0c;共成长。热血与浪漫交织的《花千骨》与《苍兰诀》&#xff0c;给我们带来了两位风华绝代的守护者&#xff1a;白子…

磁盘初始化会丢失文件吗?答案揭晓!

“由于我的电脑出现了一些问题&#xff0c;我就将磁盘初始化了&#xff0c;但是里面还有很重要的文件&#xff0c;磁盘初始化了文件会丢失吗&#xff1f;有什么方法可以恢复丢失的文件呢&#xff1f;” 当我们谈论磁盘初始化&#xff0c;通常是指对硬盘或固态驱动器&#xff08…

解决执行npm(或pnpm)时报:证书过期 certificate has expired问题

项目执行 pnpm install 初始化时报 reason: certificate has expired 错误。 解决方案 1、取消ssl验证&#xff1a;npm config set strict-ssl false这个方法一般就可以解决了。2、更换npm镜像源&#xff1a;npm config set registry http://registry.cnpmjs.org npm config …

第13节-简历中的开放性问题

(点击即可收听) 不少公司的开放式题目每年不会有太大的变化&#xff0c;所以在答题前可先去相关求职论坛看看这些公司往年的问题&#xff0c;分析和思考自己应当怎么回答 开放式问题回答技巧 开放式问题主要考察的是求职者的求职动机、解决问题的能力、创造力等软实力&#xff…

initdb: command not found【PostgreSQL】

如果您遇到 “initdb: command not found” 错误&#xff0c;说明 initdb 命令未找到&#xff0c;该命令用于初始化新的 PostgreSQL 数据库群集。这通常是因为 PostgreSQL 相关的工具未正确安装或者安装路径不在系统的 PATH 变量中。 以下是解决这个问题的一些建议&#xff1a…

linux|操作系统|centos7物理机安装网卡驱动8188gu(内核升级,firmware固件,USB设备管理,module管理)

前言&#xff1a; 目前服务器领域centos7基本是主流的操作系统&#xff0c;而linux相对于Windows来说&#xff0c;软硬件方面的支持是差很多的&#xff0c;在硬件方面来说&#xff0c;以一个免驱的网卡为例&#xff0c;window xp可能不会自动识别到&#xff0c;但Windows10基本…

wikijs在启动项目时遇到的问题

问题 使用PostgreSQL安装wikijs过程中&#xff0c;启动项目运行node server时&#xff0c;会报错如下&#xff1a; error: Database Initialization Error: create table "migrations" ("id" serial primary key, "name" varchar(255), "b…

JUC并发编程与源码分析学习笔记(二)

二十九、多线程锁之线程锁知识概述 说说Java“锁”事 从轻松的乐观锁和悲观锁开讲 通过8种情况演示锁运行案例&#xff0c;看看我们到底锁的是什么 公平锁和非公平锁 可重入锁&#xff08;又名递归锁&#xff09; 死锁及排查 写锁&#xff08;独占锁&#xff09;/读锁&a…