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,请你帮忙计算并返回该整数「各位数字之积」与「各位数字之和」的差。 示例1: 示例2: 提示: 1 …...
EditPlus连接Linux系统远程操作文件
EditPlus是一套功能强大的文本编辑器! 1.File ->FTP->FTP Settings; 2.Add->Description->FTP server->Username->Password->Subdirectory->Advanced Options 注意:这里的Subdirectory设置的是以后上传文件的默认…...
JVM 垃圾回收
垃圾回收算法 标记-清除算法(Mark and Sweep) 标记-清除算法分为两个阶段。在标记阶段,垃圾收集器会标记所有活动对象;在清除阶段,垃圾收集器会清除所有未标记的对象。标记-清除算法存在的问题是会产生内存碎片&#…...
编程中的宝藏:二分查找
二分查找 假设你需要在电话簿中找到一个以字母 “K” 开头的名字(虽然现在谁还在用电话簿呢!)。你可以从头开始翻页,直到进入以 “K” 打头的部分。然而,更明智的方法是从中间开始,因为你知道以 “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,HHO),是由Ali As…...
【深度学习】多粒度、多尺度、多源融合和多模态融合的区别
多粒度(multiresolution)和多尺度(multiscale) 多粒度(multiresolution)和多尺度(multiscale)都是指在不同的空间或时间尺度上对数据或信号进行分析和处理。其中 多尺度࿱…...
利用SCCM进行横向移动
01SCCM介绍 SCCM全名为System Center Configuration Manager,从版本1910开始,微软官方将其从Microsoft System Center产品移除,重新命名为Microsoft Endpoint Configuration Manager(ConfigMgr),其可帮助 …...
Nginx 负载均衡
Nginx 负载均衡 负载均衡由反向代理来实现的 其中反向代理分为七层代理和四层代理,一般常用的是七层代理,接下来分别介绍一些 NGINX 七层代理 七层是最常用的反向代理方式,只能配置在Nginx配置文件的http模块。 配置方法名称:…...
Java课题笔记~ ServletConfig
概念:代表整个web应用,可以和程序的容器(服务器)来通信 <?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提供了预定义例外、非预定义例外和自定义例外三种类型。其中: l预定义例外用于处理常见的oracle错误; l非预定义例外用于处理预定义所不能处理的oracle错误; 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_…...
【数据结构与算法】十大经典排序算法-希尔排序
🌟个人博客:www.hellocode.top 🏰Java知识导航:Java-Navigate 🔥CSDN:HelloCode. 🌞知乎:HelloCode 🌴掘金:HelloCode ⚡如有问题,欢迎指正&#…...
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微信小程序中打开腾讯地图获取用户位置信息
实现的效果 第一步:首先登录微信公众平台 , 需要用到AppID 第二步: 注册登录腾讯位置服务 注册需要手机号和邮箱确认,然后创建应用 创建后点击添加key 添加后会生成key,后面会用到这个key 第三步: 登录微信公众平台&a…...
嵌入式领域:人才供需失衡,发展潜力巨大
嵌入式技术正快速发展,ARM处理器、嵌入式操作系统、LINUX等技术助力嵌入式领域崛起。然而,行业新颖且门槛高,缺乏专业指导。因此,嵌入式人才稀缺,身价水涨船高。 未来几年,嵌入式系统将在信息化、智能化、…...
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无法装就: docker-php-source extract # 创建并初始化 /usr/src/php目录(扩展…...
微信小程序之bind和catch
这两个呢,都是绑定事件用的,具体使用有些小区别。 官方文档: 事件冒泡处理不同 bind:绑定的事件会向上冒泡,即触发当前组件的事件后,还会继续触发父组件的相同事件。例如,有一个子视图绑定了b…...
线程同步:确保多线程程序的安全与高效!
全文目录: 开篇语前序前言第一部分:线程同步的概念与问题1.1 线程同步的概念1.2 线程同步的问题1.3 线程同步的解决方案 第二部分:synchronized关键字的使用2.1 使用 synchronized修饰方法2.2 使用 synchronized修饰代码块 第三部分ÿ…...
(二)TensorRT-LLM | 模型导出(v0.20.0rc3)
0. 概述 上一节 对安装和使用有个基本介绍。根据这个 issue 的描述,后续 TensorRT-LLM 团队可能更专注于更新和维护 pytorch backend。但 tensorrt backend 作为先前一直开发的工作,其中包含了大量可以学习的地方。本文主要看看它导出模型的部分&#x…...
vue3+vite项目中使用.env文件环境变量方法
vue3vite项目中使用.env文件环境变量方法 .env文件作用命名规则常用的配置项示例使用方法注意事项在vite.config.js文件中读取环境变量方法 .env文件作用 .env 文件用于定义环境变量,这些变量可以在项目中通过 import.meta.env 进行访问。Vite 会自动加载这些环境变…...
全志A40i android7.1 调试信息打印串口由uart0改为uart3
一,概述 1. 目的 将调试信息打印串口由uart0改为uart3。 2. 版本信息 Uboot版本:2014.07; Kernel版本:Linux-3.10; 二,Uboot 1. sys_config.fex改动 使能uart3(TX:PH00 RX:PH01),并让boo…...
AI病理诊断七剑下天山,医疗未来触手可及
一、病理诊断困局:刀尖上的医学艺术 1.1 金标准背后的隐痛 病理诊断被誉为"诊断的诊断",医生需通过显微镜观察组织切片,在细胞迷宫中捕捉癌变信号。某省病理质控报告显示,基层医院误诊率达12%-15%,专家会诊…...
逻辑回归暴力训练预测金融欺诈
简述 「使用逻辑回归暴力预测金融欺诈,并不断增加特征维度持续测试」的做法,体现了一种逐步建模与迭代验证的实验思路,在金融欺诈检测中非常有价值,本文作为一篇回顾性记录了早年间公司给某行做反欺诈预测用到的技术和思路。百度…...
Chromium 136 编译指南 Windows篇:depot_tools 配置与源码获取(二)
引言 工欲善其事,必先利其器。在完成了 Visual Studio 2022 和 Windows SDK 的安装后,我们即将接触到 Chromium 开发生态中最核心的工具——depot_tools。这个由 Google 精心打造的工具集,就像是连接开发者与 Chromium 庞大代码库的智能桥梁…...
解析奥地利 XARION激光超声检测系统:无膜光学麦克风 + 无耦合剂的技术协同优势及多元应用
在工业制造领域,无损检测(NDT)的精度与效率直接影响产品质量与生产安全。奥地利 XARION开发的激光超声精密检测系统,以非接触式光学麦克风技术为核心,打破传统检测瓶颈,为半导体、航空航天、汽车制造等行业提供了高灵敏…...
破解路内监管盲区:免布线低位视频桩重塑停车管理新标准
城市路内停车管理常因行道树遮挡、高位设备盲区等问题,导致车牌识别率低、逃费率高,传统模式在复杂路段束手无策。免布线低位视频桩凭借超低视角部署与智能算法,正成为破局关键。该设备安装于车位侧方0.5-0.7米高度,直接规避树枝遮…...
