当前位置: 首页 > 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;扩展…...

CVPR 2025 MIMO: 支持视觉指代和像素grounding 的医学视觉语言模型

CVPR 2025 | MIMO&#xff1a;支持视觉指代和像素对齐的医学视觉语言模型 论文信息 标题&#xff1a;MIMO: A medical vision language model with visual referring multimodal input and pixel grounding multimodal output作者&#xff1a;Yanyuan Chen, Dexuan Xu, Yu Hu…...

MVC 数据库

MVC 数据库 引言 在软件开发领域,Model-View-Controller(MVC)是一种流行的软件架构模式,它将应用程序分为三个核心组件:模型(Model)、视图(View)和控制器(Controller)。这种模式有助于提高代码的可维护性和可扩展性。本文将深入探讨MVC架构与数据库之间的关系,以…...

如何在网页里填写 PDF 表格?

有时候&#xff0c;你可能希望用户能在你的网站上填写 PDF 表单。然而&#xff0c;这件事并不简单&#xff0c;因为 PDF 并不是一种原生的网页格式。虽然浏览器可以显示 PDF 文件&#xff0c;但原生并不支持编辑或填写它们。更糟的是&#xff0c;如果你想收集表单数据&#xff…...

QT3D学习笔记——圆台、圆锥

类名作用Qt3DWindow3D渲染窗口容器QEntity场景中的实体&#xff08;对象或容器&#xff09;QCamera控制观察视角QPointLight点光源QConeMesh圆锥几何网格QTransform控制实体的位置/旋转/缩放QPhongMaterialPhong光照材质&#xff08;定义颜色、反光等&#xff09;QFirstPersonC…...

mac:大模型系列测试

0 MAC 前几天经过学生优惠以及国补17K入手了mac studio,然后这两天亲自测试其模型行运用能力如何&#xff0c;是否支持微调、推理速度等能力。下面进入正文。 1 mac 与 unsloth 按照下面的进行安装以及测试&#xff0c;是可以跑通文章里面的代码。训练速度也是很快的。 注意…...

用鸿蒙HarmonyOS5实现中国象棋小游戏的过程

下面是一个基于鸿蒙OS (HarmonyOS) 的中国象棋小游戏的实现代码。这个实现使用Java语言和鸿蒙的Ability框架。 1. 项目结构 /src/main/java/com/example/chinesechess/├── MainAbilitySlice.java // 主界面逻辑├── ChessView.java // 游戏视图和逻辑├──…...

【Veristand】Veristand环境安装教程-Linux RT / Windows

首先声明&#xff0c;此教程是针对Simulink编译模型并导入Veristand中编写的&#xff0c;同时需要注意的是老用户编译可能用的是Veristand Model Framework&#xff0c;那个是历史版本&#xff0c;且NI不会再维护&#xff0c;新版本编译支持为VeriStand Model Generation Suppo…...

嵌入式学习之系统编程(九)OSI模型、TCP/IP模型、UDP协议网络相关编程(6.3)

目录 一、网络编程--OSI模型 二、网络编程--TCP/IP模型 三、网络接口 四、UDP网络相关编程及主要函数 ​编辑​编辑 UDP的特征 socke函数 bind函数 recvfrom函数&#xff08;接收函数&#xff09; sendto函数&#xff08;发送函数&#xff09; 五、网络编程之 UDP 用…...

【FTP】ftp文件传输会丢包吗?批量几百个文件传输,有一些文件没有传输完整,如何解决?

FTP&#xff08;File Transfer Protocol&#xff09;本身是一个基于 TCP 的协议&#xff0c;理论上不会丢包。但 FTP 文件传输过程中仍可能出现文件不完整、丢失或损坏的情况&#xff0c;主要原因包括&#xff1a; ✅ 一、FTP传输可能“丢包”或文件不完整的原因 原因描述网络…...

es6+和css3新增的特性有哪些

一&#xff1a;ECMAScript 新特性&#xff08;ES6&#xff09; ES6 (2015) - 革命性更新 1&#xff0c;记住的方法&#xff0c;从一个方法里面用到了哪些技术 1&#xff0c;let /const块级作用域声明2&#xff0c;**默认参数**&#xff1a;函数参数可以设置默认值。3&#x…...