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

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>

相关文章:

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

实现效果图&#xff1a; 默认选中第一个按钮&#xff0c;未选中按钮为粉色&#xff0c;点击时颜色变为红色 利用动态类名&#xff0c;当定义isChange数值和下标index相同时&#xff0c;赋予act类名&#xff0c;实现变色效果 <template><div class"page"&…...

Redis的key过期策略是怎么实现的

这是一道经典的Redis面试题&#xff0c;一个Redis中可能存在很多很多的key&#xff0c;这些key中可能有很大一部分都有过期时间&#xff0c;此时Redis服务器咋知道哪些key已经过期&#xff0c;哪些还没过期呢&#xff1f; 如果直接遍历所有的key&#xff0c;这显然是行不通的&…...

vue+elenemt分页+springboot

目录 1、编写模板 2、发请求调接口 3、后端返回数据 1.编写实体类 2、UserController 3、Userservice接口 4、&#xff08;mapper接口&#xff09;UserMapper 5、xml 1、编写模板 <!-- 搜素框 --><el-input placeholder"请输入姓名" v-model"ke…...

C++ :命名空间域

目录 冲突与命名&#xff1a; 举个例子&#xff1a; 全局与局部&#xff1a; 域作用限定符&#xff1a; 命名空间域&#xff1a; 冲突与命名&#xff1a; 在C语言中&#xff0c;我们通常会使用stdlib.h 而stdlib.h 本质上是一个函数的库&#xff0c;在程序中使用的大多数…...

提升网站关键词排名的工具

随着互联网的蓬勃发展&#xff0c;网站的关键词排名成为衡量网站流量和曝光度的重要指标。在这个竞争激烈的数字时代&#xff0c;站在搜索引擎结果的前列变得至关重要。为了实现这一目标&#xff0c;合理利用关键词排名优化工具是必不可少的。本文将重点介绍147SEO软件&#xf…...

ICMP控制消息 汇总

控制消息由 类型 字段中的值标识。代码 字段给出了消息的附加上下文信息。自协议首次引入以来&#xff0c;一些控制消息已被弃用。 重要的ICMP Control Message控制信息 类型码状态描述0 –回声回复&#xff1a;140回声回复&#xff08;用于ping&#xff09;1和2未分配已预留3 …...

C#,入门教程(22)——函数的基础知识

上一篇&#xff1a; C#&#xff0c;入门教程(21)——命名空间&#xff08;namespace&#xff09;与程序结构的基础知识https://blog.csdn.net/beijinghorn/article/details/124140653 一、函数的基本概念 一个软件的结构大体如下&#xff1a; 大厦application: a plaza { --…...

已经30了,5年多,只会功能测试的怎么办?

&#x1f345; 视频学习&#xff1a;文末有免费的配套视频可观看 &#x1f345; 关注公众号【互联网杂货铺】&#xff0c;回复 1 &#xff0c;免费获取软件测试全套资料&#xff0c;资料在手&#xff0c;涨薪更快 这两天一直在和网易的朋友聊软件测试的发展&#xff0c;这一行的…...

什么是UML?有什么用?

2、什么是UML?有什么用&#xff1f; UML 是 Unified Model Language的缩写&#xff0c;中文是统一建模语言&#xff0c;是由一整套图表组成的标准化建模语言。 UML 是一种统一建模语言&#xff0c;一种图标式语言&#xff08;画图的&#xff09; UML 不是只有 Java 中使用&…...

盘点好用内容合规监测工具

网页敏感内容监测 Web Purify 由 WebPurify 提供&#xff0c;这是一个专门从事内容审核和过滤服务的公司。 核心功能 ● 文本审核&#xff1a;加强脏话过滤&#xff0c;标记仇恨言论、偏执、性挑逗等 ● 图片审核&#xff1a;让个人资料照片、社交应用程序、产品定制远离令…...

CC工具箱使用指南:【查找锐角】

一、简介 在面要素中&#xff0c;尖锐角往往是有问题的地方。 在一系列空间分析后&#xff0c;通常会遗留下来部分尖锐角&#xff0c;需要手动处理。 但是人工去找出这些尖锐角又比较麻烦&#xff0c;这个工具的目的就是找出面要素边界的尖锐角。 二、工具参数介绍 右键点击…...

kafka消费相关问题(GPT回答版本)

kafka消费相关问题&#xff08;GPT回答版本&#xff09; 在Java中&#xff0c;要避免重复消费Kafka消息&#xff0c;可以使用以下方法 1. 使用消费者组&#xff1a; 在设置Kafka消费者时&#xff0c;可以指定一个消费者组。一个消费者组中可以有多个消费者实例&#xff0c;每…...

【C++】string的基本使用二

我们接着上一篇的迭代器说起&#xff0c;迭代器不只有正向的&#xff0c;还有反向的&#xff0c;就是我们下边的这两个 它的迭代器类型也是不同的 rbegin就是末尾&#xff0c;rend就是开头&#xff0c;这样我们想遍历一个string对象的话就可以这样做 int main() {string s1(…...

MATLAB解决考研数学一题型(上)

闲来无事&#xff0c;情感问题和考研结束后的戒断反应比较严重&#xff0c;最近没有什么写博文的动力&#xff0c;抽空来整理一下考研初试前一直想做的工作——整理一下MATLAB解决数学一各题型的命令~ 本贴的目录遵循同济版的高数目录~ 目录 一.函数与极限 1.计算双侧极限 2…...

Vue以弹窗形式实现导入功能

目录 前言正文 前言 由于个人工作原因&#xff0c;偏全栈&#xff0c;对于前端的总结还有些初出茅庐&#xff0c;后续会进行规整化的总结 对应的前端框架由&#xff1a;【vue】avue-crud表单属性配置&#xff08;表格以及列&#xff09; 最终实现的表单样式如下&#xff1a;…...

分布式锁原理及实现

目录 一、锁的使用场景 二、如何实现控制&#xff1f; 三、单台服务器使用锁的场景 四、分布式锁 五、Redis 实现分布式锁及存在问题 六、Redisson 实现分布式锁 七、定时任务&#xff0b;锁 一、锁的使用场景 1. 控制定时任务执行 定时任务多次执行浪费资源&#xff…...

蓝桥杯官网填空题(海盗与金币)

题目描述 本题为填空题&#xff0c;只需要算出结果后&#xff0c;在代码中使用输出语句将所填结果输出即可。 12名海盗在一个小岛上发现了大量的金币&#xff0c;后统计一共有将近5万枚。 登上小岛是在夜里&#xff0c;天气又不好。由于各种原因&#xff0c;有的海盗偷拿了很…...

JavaScript 中JSON 字符串和对象之间的转换。

JSON.stringify() 方法&#xff08;对象转换为 JSON 字符串&#xff09; 用于将 JavaScript 对象转换为 JSON 字符串。 它接受一个 JavaScript 对象作为参数&#xff0c;并返回对应的 JSON 字符串表示。例如&#xff1a; const obj { name: John, age: 25 }; const jsonStr…...

All the stories begin at installation

Before installation, there are some key points about Conan: “Conan is a dependency and package manager for C and C languages.”“With full binary management, Conan can create and reuse any number of different binaries (for different configurations like a…...

Linux文件系统与设备文件

Linux文件系统与设备文件 文章目录 Linux文件系统与设备文件Linux文件操作文件操作系统调用C库文件操作 Linux文件系统Linux文件系统目录结构Linux文件系统与设备驱动file结构体inode结构体file结构体和inode结构体的区别 devfsudev用户空间设备管理sysfs文件系统与Linux设备模…...

k8s从入门到放弃之Ingress七层负载

k8s从入门到放弃之Ingress七层负载 在Kubernetes&#xff08;简称K8s&#xff09;中&#xff0c;Ingress是一个API对象&#xff0c;它允许你定义如何从集群外部访问集群内部的服务。Ingress可以提供负载均衡、SSL终结和基于名称的虚拟主机等功能。通过Ingress&#xff0c;你可…...

跨链模式:多链互操作架构与性能扩展方案

跨链模式&#xff1a;多链互操作架构与性能扩展方案 ——构建下一代区块链互联网的技术基石 一、跨链架构的核心范式演进 1. 分层协议栈&#xff1a;模块化解耦设计 现代跨链系统采用分层协议栈实现灵活扩展&#xff08;H2Cross架构&#xff09;&#xff1a; 适配层&#xf…...

在Ubuntu中设置开机自动运行(sudo)指令的指南

在Ubuntu系统中&#xff0c;有时需要在系统启动时自动执行某些命令&#xff0c;特别是需要 sudo权限的指令。为了实现这一功能&#xff0c;可以使用多种方法&#xff0c;包括编写Systemd服务、配置 rc.local文件或使用 cron任务计划。本文将详细介绍这些方法&#xff0c;并提供…...

稳定币的深度剖析与展望

一、引言 在当今数字化浪潮席卷全球的时代&#xff0c;加密货币作为一种新兴的金融现象&#xff0c;正以前所未有的速度改变着我们对传统货币和金融体系的认知。然而&#xff0c;加密货币市场的高度波动性却成为了其广泛应用和普及的一大障碍。在这样的背景下&#xff0c;稳定…...

让回归模型不再被异常值“带跑偏“,MSE和Cauchy损失函数在噪声数据环境下的实战对比

在机器学习的回归分析中&#xff0c;损失函数的选择对模型性能具有决定性影响。均方误差&#xff08;MSE&#xff09;作为经典的损失函数&#xff0c;在处理干净数据时表现优异&#xff0c;但在面对包含异常值的噪声数据时&#xff0c;其对大误差的二次惩罚机制往往导致模型参数…...

论文笔记——相干体技术在裂缝预测中的应用研究

目录 相关地震知识补充地震数据的认识地震几何属性 相干体算法定义基本原理第一代相干体技术&#xff1a;基于互相关的相干体技术&#xff08;Correlation&#xff09;第二代相干体技术&#xff1a;基于相似的相干体技术&#xff08;Semblance&#xff09;基于多道相似的相干体…...

C++.OpenGL (14/64)多光源(Multiple Lights)

多光源(Multiple Lights) 多光源渲染技术概览 #mermaid-svg-3L5e5gGn76TNh7Lq {font-family:"trebuchet ms",verdana,arial,sans-serif;font-size:16px;fill:#333;}#mermaid-svg-3L5e5gGn76TNh7Lq .error-icon{fill:#552222;}#mermaid-svg-3L5e5gGn76TNh7Lq .erro…...

VM虚拟机网络配置(ubuntu24桥接模式):配置静态IP

编辑-虚拟网络编辑器-更改设置 选择桥接模式&#xff0c;然后找到相应的网卡&#xff08;可以查看自己本机的网络连接&#xff09; windows连接的网络点击查看属性 编辑虚拟机设置更改网络配置&#xff0c;选择刚才配置的桥接模式 静态ip设置&#xff1a; 我用的ubuntu24桌…...

C/C++ 中附加包含目录、附加库目录与附加依赖项详解

在 C/C 编程的编译和链接过程中&#xff0c;附加包含目录、附加库目录和附加依赖项是三个至关重要的设置&#xff0c;它们相互配合&#xff0c;确保程序能够正确引用外部资源并顺利构建。虽然在学习过程中&#xff0c;这些概念容易让人混淆&#xff0c;但深入理解它们的作用和联…...

vulnyx Blogger writeup

信息收集 arp-scan nmap 获取userFlag 上web看看 一个默认的页面&#xff0c;gobuster扫一下目录 可以看到扫出的目录中得到了一个有价值的目录/wordpress&#xff0c;说明目标所使用的cms是wordpress&#xff0c;访问http://192.168.43.213/wordpress/然后查看源码能看到 这…...