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

vue实现5*5宫格当鼠标滑过选中的正方形背景颜色统一变色

vue实现5*5宫格当鼠标滑过选中的正方形背景颜色统一变色

1、实现的效果
在这里插入图片描述

2、完整代码展示

<template><div id="app" @mouseleave="handleMouseLeave({row: 0, col: 0 })"><div v-for="rowItem in squareNumber" :key="rowItem"><div class="row-list"><div v-for="colItem in squareNumber" :key='colItem' :class="['col-item', `${rowItem}-${colItem}`]" @mouseenter="handleMouseEnter({row: rowItem, col:colItem })"@mouseleave="handleMouseLeave({row: rowItem, col:colItem })"></div></div></div></div>
</template><script>export default {data() {return {squareNumber: 5}},methods: {handleMouseEnter(obj) {const {row, col} = obj;for(let rowItem = 1; rowItem <= row; rowItem++ ) {for(let colItem = 1; colItem <= col; colItem ++) {const element = document.getElementsByClassName(`${rowItem}-${colItem}`);if(element) {Array.from(element).forEach(item => {item.style.background = 'red';})}}}},handleMouseLeave(obj) {const {row, col} = obj;for(let rowItem = 1; rowItem <= this.squareNumber; rowItem++ ) {for(let colItem = 1; colItem <= this.squareNumber; colItem ++) {const element = document.getElementsByClassName(`${rowItem}-${colItem}`);if(element) {Array.from(element).forEach(item => {item.style.background = 'none';})}}};if(!row || !col) {this.handleMouseEnter({row: row - 1, col: col - 1})}}}
}
</script><style>
#app {border-top:1px solid black;border-left: 1px solid black;
}
.row-list {display: flex;
}
.col-item {width: 30px;height: 30px;border-right: 1px solid black;border-bottom: 1px solid black;
}
</style>

以上代码粘贴赋值即可使用

相关文章:

vue实现5*5宫格当鼠标滑过选中的正方形背景颜色统一变色

vue实现5*5宫格当鼠标滑过选中的正方形背景颜色统一变色 1、实现的效果 2、完整代码展示 <template><div id"app" mouseleave"handleMouseLeave({row: 0, col: 0 })"><div v-for"rowItem in squareNumber" :key"rowItem…...

2023-08-09 LeetCode每日一题(整数的各位积和之差)

2023-08-09每日一题 一、题目编号 1281. 整数的各位积和之差二、题目链接 点击跳转到题目位置 三、题目描述 给你一个整数 n&#xff0c;请你帮忙计算并返回该整数「各位数字之积」与「各位数字之和」的差。 示例1&#xff1a; 示例2&#xff1a; 提示&#xff1a; 1 …...

EditPlus连接Linux系统远程操作文件

EditPlus是一套功能强大的文本编辑器&#xff01; 1.File ->FTP->FTP Settings&#xff1b; 2.Add->Description->FTP server->Username->Password->Subdirectory->Advanced Options 注意&#xff1a;这里的Subdirectory设置的是以后上传文件的默认…...

JVM 垃圾回收

垃圾回收算法 标记-清除算法&#xff08;Mark and Sweep&#xff09; 标记-清除算法分为两个阶段。在标记阶段&#xff0c;垃圾收集器会标记所有活动对象&#xff1b;在清除阶段&#xff0c;垃圾收集器会清除所有未标记的对象。标记-清除算法存在的问题是会产生内存碎片&#…...

编程中的宝藏:二分查找

二分查找 假设你需要在电话簿中找到一个以字母 “K” 开头的名字&#xff08;虽然现在谁还在用电话簿呢&#xff01;&#xff09;。你可以从头开始翻页&#xff0c;直到进入以 “K” 打头的部分。然而&#xff0c;更明智的方法是从中间开始&#xff0c;因为你知道以 “K” 打头…...

计算机网络 数据链路层

...

如何维护自己的电脑

目录 1、关于电脑选择的建议 1.1、价格预算 1.2、明确需求 1.3、电脑配置 1.4、分辨率 1.5、续航能力 1.6、品牌选择 1.7、用户评测 1.8、各个电商平台对比 1.9、最后决策 2、我的选择 3、电脑保养 3.1 外部清洁 3.2 安装软件 3.3 优化操作系统 3.4 维护硬件设…...

智能优化算法——哈里鹰算法(Matlab实现)

目录 1 算法简介 2 算法数学模型 2.1.全局探索阶段 2.2 过渡阶段 2.3.局部开采阶段 3 求解步骤与程序框图 3.1 步骤 3.2 程序框图 4 matlab代码及结果 4.1 代码 4.2 结果 1 算法简介 哈里斯鹰算法(Harris Hawks Optimization&#xff0c;HHO)&#xff0c;是由Ali As…...

【深度学习】多粒度、多尺度、多源融合和多模态融合的区别

多粒度&#xff08;multiresolution&#xff09;和多尺度&#xff08;multiscale&#xff09; 多粒度&#xff08;multiresolution&#xff09;和多尺度&#xff08;multiscale&#xff09;都是指在不同的空间或时间尺度上对数据或信号进行分析和处理。其中 多尺度&#xff1…...

利用SCCM进行横向移动

01SCCM介绍 SCCM全名为System Center Configuration Manager&#xff0c;从版本1910开始&#xff0c;微软官方将其从Microsoft System Center产品移除&#xff0c;重新命名为Microsoft Endpoint Configuration Manager&#xff08;ConfigMgr&#xff09;&#xff0c;其可帮助 …...

Nginx 负载均衡

Nginx 负载均衡 负载均衡由反向代理来实现的 其中反向代理分为七层代理和四层代理&#xff0c;一般常用的是七层代理&#xff0c;接下来分别介绍一些 NGINX 七层代理 七层是最常用的反向代理方式&#xff0c;只能配置在Nginx配置文件的http模块。 配置方法名称&#xff1a;…...

Java课题笔记~ ServletConfig

概念&#xff1a;代表整个web应用&#xff0c;可以和程序的容器(服务器)来通信 <?xml version"1.0" encoding"UTF-8"?> <web-app xmlns"http://java.sun.com/xml/ns/javaee"xmlns:xsi"http://www.w3.org/2001/XMLSchema-instan…...

oracle的异常处理

oracle提供了预定义例外、非预定义例外和自定义例外三种类型。其中&#xff1a; l预定义例外用于处理常见的oracle错误&#xff1b; l非预定义例外用于处理预定义所不能处理的oracle错误&#xff1b; l自定义例外处理与oracle错误无关的其他情况。 Oracle代码编写过程中&am…...

【MySQL】MySQL数据类型

文章目录 一、数据类型的分类二、tinyint类型2.1 创建有符号数值2.2 创建无符号数值 三、bit类型三、浮点类型3.1 float3.2 decimal类型 四、字符串类型4.1 char类型4.2 varchar类型 五、日期和时间类型六、枚举和集合类型6.1 enum的枚举值和set的位图结构6.2 查询集合find_in_…...

【数据结构与算法】十大经典排序算法-希尔排序

&#x1f31f;个人博客&#xff1a;www.hellocode.top &#x1f3f0;Java知识导航&#xff1a;Java-Navigate &#x1f525;CSDN&#xff1a;HelloCode. &#x1f31e;知乎&#xff1a;HelloCode &#x1f334;掘金&#xff1a;HelloCode ⚡如有问题&#xff0c;欢迎指正&#…...

docker 常用命令

1. 搜索并下载镜像 docker search bundlefusion # 搜索docker pull jhljx/bundlefusion # 将远程仓库文件下载到本地2. 用镜像创建容器 docker run -it --namebundlefusion colec777/bundlefusion-cu11.4-cudagl:v8 /bin/bash # 创建并运行 exit # 退出终端 sudo docker cont…...

uniapp微信小程序中打开腾讯地图获取用户位置信息

实现的效果 第一步&#xff1a;首先登录微信公众平台 , 需要用到AppID 第二步&#xff1a; 注册登录腾讯位置服务 注册需要手机号和邮箱确认&#xff0c;然后创建应用 创建后点击添加key 添加后会生成key&#xff0c;后面会用到这个key 第三步&#xff1a; 登录微信公众平台&a…...

嵌入式领域:人才供需失衡,发展潜力巨大

嵌入式技术正快速发展&#xff0c;ARM处理器、嵌入式操作系统、LINUX等技术助力嵌入式领域崛起。然而&#xff0c;行业新颖且门槛高&#xff0c;缺乏专业指导。因此&#xff0c;嵌入式人才稀缺&#xff0c;身价水涨船高。 未来几年&#xff0c;嵌入式系统将在信息化、智能化、…...

python 书籍

python高手进阶之路 10册 QQ:417398600...

Debian纯净系统安装php常用扩展和程序

适用于 php-fpm debian容器 mysql扩展 docker-php-ext-install pdo_mysql docker-php-ext-install mysqliredis扩展 pecl install redis docker-php-ext-enable redis# pecl无法装就&#xff1a; docker-php-source extract # 创建并初始化 /usr/src/php目录&#xff08;扩展…...

基于FPGA的PID算法学习———实现PID比例控制算法

基于FPGA的PID算法学习 前言一、PID算法分析二、PID仿真分析1. PID代码2.PI代码3.P代码4.顶层5.测试文件6.仿真波形 总结 前言 学习内容&#xff1a;参考网站&#xff1a; PID算法控制 PID即&#xff1a;Proportional&#xff08;比例&#xff09;、Integral&#xff08;积分&…...

阿里云ACP云计算备考笔记 (5)——弹性伸缩

目录 第一章 概述 第二章 弹性伸缩简介 1、弹性伸缩 2、垂直伸缩 3、优势 4、应用场景 ① 无规律的业务量波动 ② 有规律的业务量波动 ③ 无明显业务量波动 ④ 混合型业务 ⑤ 消息通知 ⑥ 生命周期挂钩 ⑦ 自定义方式 ⑧ 滚的升级 5、使用限制 第三章 主要定义 …...

汽车生产虚拟实训中的技能提升与生产优化​

在制造业蓬勃发展的大背景下&#xff0c;虚拟教学实训宛如一颗璀璨的新星&#xff0c;正发挥着不可或缺且日益凸显的关键作用&#xff0c;源源不断地为企业的稳健前行与创新发展注入磅礴强大的动力。就以汽车制造企业这一极具代表性的行业主体为例&#xff0c;汽车生产线上各类…...

Cilium动手实验室: 精通之旅---20.Isovalent Enterprise for Cilium: Zero Trust Visibility

Cilium动手实验室: 精通之旅---20.Isovalent Enterprise for Cilium: Zero Trust Visibility 1. 实验室环境1.1 实验室环境1.2 小测试 2. The Endor System2.1 部署应用2.2 检查现有策略 3. Cilium 策略实体3.1 创建 allow-all 网络策略3.2 在 Hubble CLI 中验证网络策略源3.3 …...

oracle与MySQL数据库之间数据同步的技术要点

Oracle与MySQL数据库之间的数据同步是一个涉及多个技术要点的复杂任务。由于Oracle和MySQL的架构差异&#xff0c;它们的数据同步要求既要保持数据的准确性和一致性&#xff0c;又要处理好性能问题。以下是一些主要的技术要点&#xff1a; 数据结构差异 数据类型差异&#xff…...

C++.OpenGL (10/64)基础光照(Basic Lighting)

基础光照(Basic Lighting) 冯氏光照模型(Phong Lighting Model) #mermaid-svg-GLdskXwWINxNGHso {font-family:"trebuchet ms",verdana,arial,sans-serif;font-size:16px;fill:#333;}#mermaid-svg-GLdskXwWINxNGHso .error-icon{fill:#552222;}#mermaid-svg-GLd…...

Python 包管理器 uv 介绍

Python 包管理器 uv 全面介绍 uv 是由 Astral&#xff08;热门工具 Ruff 的开发者&#xff09;推出的下一代高性能 Python 包管理器和构建工具&#xff0c;用 Rust 编写。它旨在解决传统工具&#xff08;如 pip、virtualenv、pip-tools&#xff09;的性能瓶颈&#xff0c;同时…...

RabbitMQ入门4.1.0版本(基于java、SpringBoot操作)

RabbitMQ 一、RabbitMQ概述 RabbitMQ RabbitMQ最初由LShift和CohesiveFT于2007年开发&#xff0c;后来由Pivotal Software Inc.&#xff08;现为VMware子公司&#xff09;接管。RabbitMQ 是一个开源的消息代理和队列服务器&#xff0c;用 Erlang 语言编写。广泛应用于各种分布…...

系统掌握PyTorch:图解张量、Autograd、DataLoader、nn.Module与实战模型

本文较长&#xff0c;建议点赞收藏&#xff0c;以免遗失。更多AI大模型应用开发学习视频及资料&#xff0c;尽在聚客AI学院。 本文通过代码驱动的方式&#xff0c;系统讲解PyTorch核心概念和实战技巧&#xff0c;涵盖张量操作、自动微分、数据加载、模型构建和训练全流程&#…...

comfyui 工作流中 图生视频 如何增加视频的长度到5秒

comfyUI 工作流怎么可以生成更长的视频。除了硬件显存要求之外还有别的方法吗&#xff1f; 在ComfyUI中实现图生视频并延长到5秒&#xff0c;需要结合多个扩展和技巧。以下是完整解决方案&#xff1a; 核心工作流配置&#xff08;24fps下5秒120帧&#xff09; #mermaid-svg-yP…...