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

【OSG学习笔记】Day 18: 碰撞检测与物理交互

物理引擎&#xff08;Physics Engine&#xff09; 物理引擎 是一种通过计算机模拟物理规律&#xff08;如力学、碰撞、重力、流体动力学等&#xff09;的软件工具或库。 它的核心目标是在虚拟环境中逼真地模拟物体的运动和交互&#xff0c;广泛应用于 游戏开发、动画制作、虚…...

安宝特方案丨XRSOP人员作业标准化管理平台:AR智慧点检验收套件

在选煤厂、化工厂、钢铁厂等过程生产型企业&#xff0c;其生产设备的运行效率和非计划停机对工业制造效益有较大影响。 随着企业自动化和智能化建设的推进&#xff0c;需提前预防假检、错检、漏检&#xff0c;推动智慧生产运维系统数据的流动和现场赋能应用。同时&#xff0c;…...

ETLCloud可能遇到的问题有哪些?常见坑位解析

数据集成平台ETLCloud&#xff0c;主要用于支持数据的抽取&#xff08;Extract&#xff09;、转换&#xff08;Transform&#xff09;和加载&#xff08;Load&#xff09;过程。提供了一个简洁直观的界面&#xff0c;以便用户可以在不同的数据源之间轻松地进行数据迁移和转换。…...

Python爬虫(一):爬虫伪装

一、网站防爬机制概述 在当今互联网环境中&#xff0c;具有一定规模或盈利性质的网站几乎都实施了各种防爬措施。这些措施主要分为两大类&#xff1a; 身份验证机制&#xff1a;直接将未经授权的爬虫阻挡在外反爬技术体系&#xff1a;通过各种技术手段增加爬虫获取数据的难度…...

Module Federation 和 Native Federation 的比较

前言 Module Federation 是 Webpack 5 引入的微前端架构方案&#xff0c;允许不同独立构建的应用在运行时动态共享模块。 Native Federation 是 Angular 官方基于 Module Federation 理念实现的专为 Angular 优化的微前端方案。 概念解析 Module Federation (模块联邦) Modul…...

css的定位(position)详解:相对定位 绝对定位 固定定位

在 CSS 中&#xff0c;元素的定位通过 position 属性控制&#xff0c;共有 5 种定位模式&#xff1a;static&#xff08;静态定位&#xff09;、relative&#xff08;相对定位&#xff09;、absolute&#xff08;绝对定位&#xff09;、fixed&#xff08;固定定位&#xff09;和…...

【电力电子】基于STM32F103C8T6单片机双极性SPWM逆变(硬件篇)

本项目是基于 STM32F103C8T6 微控制器的 SPWM(正弦脉宽调制)电源模块,能够生成可调频率和幅值的正弦波交流电源输出。该项目适用于逆变器、UPS电源、变频器等应用场景。 供电电源 输入电压采集 上图为本设计的电源电路,图中 D1 为二极管, 其目的是防止正负极电源反接, …...

从面试角度回答Android中ContentProvider启动原理

Android中ContentProvider原理的面试角度解析&#xff0c;分为​​已启动​​和​​未启动​​两种场景&#xff1a; 一、ContentProvider已启动的情况 1. ​​核心流程​​ ​​触发条件​​&#xff1a;当其他组件&#xff08;如Activity、Service&#xff09;通过ContentR…...

9-Oracle 23 ai Vector Search 特性 知识准备

很多小伙伴是不是参加了 免费认证课程&#xff08;限时至2025/5/15&#xff09; Oracle AI Vector Search 1Z0-184-25考试&#xff0c;都顺利拿到certified了没。 各行各业的AI 大模型的到来&#xff0c;传统的数据库中的SQL还能不能打&#xff0c;结构化和非结构的话数据如何和…...

mac:大模型系列测试

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