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

【vue2】封装自定义的日历组件(三)之基础添加月份的加减定位到最新月份的第一天

news 来源：原创 2025/7/7 13:51:31

我们在切换月份的时候，希望高亮显示在每个月的第一天上面，这样的效果我们要怎么来实现，其实也很简单，我们先看下实现的效果

实现效果

请添加图片描述

代码实现

原理就是获取到每月的第一天日期，然后再跟整个的数据进行对比，添加高亮的css样式即可

handleMinusMonth() {if (this.month == 1) {this.year--;this.month = 12;} else if (this.month > 12) {this.year++;this.month = 1;} else {this.month--;}this.getDateLists();this.getFirstDay();
},
handleAddMonth() {if (this.month == 12) {this.year++;this.month = 1;} else if (this.month < 1) {this.year--;this.month = 12;} else {this.month++;}this.getDateLists();this.getFirstDay();
},
// 核心逻辑代码
getFirstDay() {// 计算当前月的第一天，添加高亮样式const firstDay = dayjs(`${this.year}-${this.month}`).startOf("month").format("YYYY-MM-DD");this.daysLists = this.daysLists.flat().map((item) => {if (item.date == firstDay) {this.$set(item, "isCurrent", true);}return item;});const lists = this.daysLists.flat().map((item) => {if (item.date == firstDay) {this.$set(item, "isCurrent", true);}return item;});this.daysLists = this.changDataList(lists);
},

重新计算每次切换后年月的第一天，然后再把数据进行flat后，对比，当前的高亮状态为true,否则为false,数据格式可以自行处理。

【vue2】封装自定义的日历组件(三)之基础添加月份的加减定位到最新月份的第一天

我们在切换月份的时候，希望高亮显示在每个月的第一天上面，这样的效果我们要怎么来实现，其实也很简单，我们先看下实现的效果实现效果代码实现原理就是获取到每月的第一天日期，然后再跟整个的数据进行对比&#xff…...

编程日记 2025/7/7 13:51:31

21天掌握javaweb--＞第12天：Spring Boot项目优化与安全性

Spring Boot项目优化与安全性 1. Spring Boot性能优化 1.1 减少依赖项评估项目的依赖项，并确保只引入必要的依赖。较多的依赖项可能会增加启动时间，因为它们需要被扫描和初始化。通过删除不需要的依赖项或仅引入必要的模块，可以减少类路径…...

编程日记 2025/7/6 15:28:44

Android —— 四大组件之Activity（一）

Android四大组件即Activity（前台）Service（后台），Broadcast（通信），ContentProvider（数据存储） 一、Activity Activity 充当了应用与用户互动的入口点Activity …...

编程日记 2025/7/7 11:17:42

目前通过ros包将激光雷达数据读取之后: roslaunch rplidar_ros view_rplidar_s2.launch 再通过运行 cartographer_ros结点将代码运行起来 roslaunch cartographer_ros demo_revo_lds.launch 这里要注意, 在demo_revo_lds.launch 文件中引入的revo_lds.lua文件中要使用仿真时…...

编程日记 2025/7/7 2:44:06

快速了解 Aurora DSQL

上周在 AWS re:Invent大会（类似于阿里云的云栖大会）上推出了新的产品 Aurora DSQL[1] ，在数据库层面提供了多区域、多点一致性写入的能力，兼容 PostgreSQL。并声称，在多语句跨区域的场景下，延迟只有Google …...

编程日记 2025/7/7 12:28:14

【Android Studio】学习——网络连接

实验：Android网络连接文章目录实验：Android网络连接[toc]实验目标和实验内容：1、掌握Android联网的基本概念；2、能够使用URL connection实现网络连接；3、掌握第三方库的基本概念4、需实现的具体功能实验结果功能说明…...

编程日记 2025/7/7 12:33:44

c语言复制字符串memcpy和strncpy函数区别

memcpy 和 strncpy 的耗时区别这两个函数在功能上有明显差异，导致性能和耗时也不同。以下是它们的详细对比： 1. 功能差异函数功能memcpy按字节复制数据，不处理字符串终止符 \0，适用于任意数据类型的内存复制。strncpy复制字符…...

编程日记 2025/7/7 11:29:38

Java设计模式 —— 【创建型模式】建造者模式详解

文章目录一、建造者模式二、案例实现三、优缺点四、模式拓展五、对比1、工厂方法模式VS建造者模式2、抽象工厂模式VS建造者模式一、建造者模式建造者模式（Builder Pattern） 又叫生成器模式，是一种对象构建模式。它可以将复杂对象的建造过…...

编程日记 2025/7/7 13:12:54

python爬虫--某房源网站验证码破解

文章目录使用模块爬取目标验证码技术细节实现成果代码实现使用模块 requests请求模块 lxml数据解析模块 ddddocr光学识别爬取目标网站验证码破解思路是统一的，本文以城市列表为例目标获取城市名以及城市连接，之后获取城市房源信息技术直接替换地址即可验证码技术…...

编程日记 2025/7/7 12:16:58

Android 项目依赖库无法找到的解决方案

目录错误信息解析解决方案 1. 检查依赖版本 2. 检查 Maven 仓库配置 3. 强制刷新 Gradle 缓存 4. 检查网络连接 5. 手动下载依赖总结相关推荐最近，我在编译一个 Android 老项目时遇到了一个问题，错误信息显示无法找到 com.gyf.immersionba…...

编程日记 2025/7/7 12:47:45

SpringBoot3整合SpringMVC

一、实现过程: (1).创建程序 (2).引入依赖: <?xml version"1.0" encoding"UTF-8"?> <project xmlns"http://maven.apache.org/POM/4.0.0"xmlns:xsi"http://www.w3.org/2001/XMLSchema-instance"xsi:schemaLocation"…...

编程日记 2025/7/7 11:52:31

内网穿透 natapp安装与使用

前言 NATAPP是一款基于ngrok的内网穿透工具。以下是对NATAPP的详细概述： 基本概念定义：内网穿透（NAT穿透）是一种技术，它允许具有特定源IP地址和端口号的数据包能够绕过NAT设备，从而被正确地路由到内网主机…...

编程日记 2025/7/7 0:39:27

docker镜像构建企业级示例

华子目录示例（在centos容器中源码编译nginx（单介构建））包准备为centos容器提供网络源添加企业7的ISO文件提交为新的centos镜像编写dockerfile文件构建镜像如何优化自己构建的镜像大小多介构建 ldd命令基本用法示例镜像优化方案…...

编程日记 2025/7/7 11:36:40

【论文阅读】龙芯2号处理器设计和性能分析

作者：胡伟武老师胡伟武老师是计算机体系结构方向的大牛，推动了龙芯处理器的发展学习体会： 学习追踪龙芯系列“工程流”论文，看看如何做工程，完成→完美龙芯2号处理器几乎是工程向的论文，主要看一下实现…...

编程日记 2025/7/7 2:38:49

二一(GIT4)、echarts(地图)、黑马就业数据平台(学生页-增删改)

1. echarts 地图 echarts社区：makeapie echarts社区图表可视化案例社区模板代码地址：自定义 tooltip-轮播 - category-work,series-map地图,tooltip提示框,visualMap视觉映射 - makeapie echarts社区图表可视化案例 // todo: 籍贯分布地图 function…...

编程日记 2025/7/7 11:54:53

数据结构排序算法详解

数据结构排序算法详解 1、冒泡排序（Bubble Sort）2、选择排序（Selection Sort）2、插入排序（Insertion Sort）4、快速排序（Quick Sort） 1、冒泡排序（Bubble Sort&#xff09…...

编程日记 2025/7/7 12:01:23

使用kubeadm命令安装k8s

版本信息 kubernetesVersion: 1.28.01. 前期环境准备先配置软件源可以安装kubeadm、kubelet、kubectl三个软件，不同的系统不同的安装方式，这里不列举了，自己找。然后要安装cri-dockerd，因为kubernetes从1.24版本不再支持docker的api，支持原生的containerd的api，可以使用…...

编程日记 2025/7/7 11:15:26

依托 Spring Boot框架，精铸高扩展性招聘信息管控系统

1 绪论 1.1 课题背景与意义在Internet高速发展的今天，计算机的应用几乎完全覆盖我们生活的各个领域，互联网在经济，生活等方面有着举足轻重的地位，成为人们资源共享，信息快速传递的重要渠道。在中国，网上管…...

编程日记 2025/7/7 12:12:59

docker 部署 mysql 9.0.1

docker 如何部署 mysql 9 ，请看下面步骤： 1. 先看 mysql 官网先点进去 8 版本的 Reference Manual 。选择 9.0 版本的。点到这里来看， 这里有一些基础的安装步骤，可以看一下。 - Basic Steps for MySQL Server Deployment wit…...

编程日记 2025/7/7 12:23:15

SQL：从某行开始，查询一定行数的语句

比如实现从第五行开始查询5行数据的SQL语句不同数据库有不同的实现方式，下面是各大数据库的查询语句。 1. SQL Server（适用于 SQL Server 2012 及之后版本）、DB2、Oracle（适用12c及以上版本） 这几种数据库的实现方式…...

编程日记 2025/7/7 11:58:54

18. 模块

一、什么是模块模块化指将一个完成的程序分解为一个一个小的模块。通过将模块组合，来搭建一个完整的程序。如果不采用模块化，那么所有的代码将统一保存到一个文件中。采用模块化后，将程序分别编写到多个文件中。使用模块化后，我…...

编程日记 2025/7/7 11:29:38

GroundingDINO微调训练_训练日志解释

文章目录 1. 训练日志1. Epoch 和 Iteration2. Learning Rate（学习率）3. ETA（预计剩余时间）4. Time 和 Data Time5. Memory6. Gradient Norm（梯度范数）7. Loss（损失）8. Individual L…...

编程日记 2025/7/7 11:07:43

华为eNSP：VRRP多网关负载分担

一、实验拓扑及目的二、实验命令及实验步骤 LSW1的配置命令 <Huawei>sy [Huawei]un in e [Huawei]sys S1 [S1]vlan batch 100 200 [S1]int g0/0/1 [S1-GigabitEthernet0/0/1]port link-type access [S1-GigabitEthernet0/0/1]port default vlan 100 [S1-GigabitEtherne…...

编程日记 2025/7/7 12:54:03

uni-app写的微信小程序如何实现账号密码登录后获取token，并且每天的第一次登录后都会直接获取参数而不是耀重新登录（1）

uni-app写的微信小程序如何实现账号密码登录后获取token（而token的有效器一般是30分钟，当页面在操作时token是不会过去，，离开页面第二天登录时token就是过期状态，因为记住了账号密码就不会操作再次登录，但是…...

编程日记 2025/7/7 6:00:49

【linux】（29）shell-变量和引号

Shell 脚本中有三种引号：双引号 "、单引号和反引号。它们有不同的作用。双引号 " 双引号允许引用的字符串中包含变量和命令替换。 #!/bin/bash name"Alice" echo "Hello, $name!"单引号单引号中的内容被原样引用&#xff0…...

编程日记 2025/7/7 11:12:11

Linux如何安装discuz

在Linux上安装Discuz!程序通常涉及以下步骤： 安装Web服务器（如Apache或Nginx）和数据库（如MySQL或PostgreSQL）。下载Discuz!的最新版本。将Discuz!文件上传到Web服务器的公共目录中。根据README.md文件配置Discuz…...

编程日记 2025/7/7 11:36:42

SpringBoot如何使用EasyExcel实现表格导出（简洁快速入门版本）

前言前面给大家介绍了动态表头的导入，这篇文章给大家介绍如何实现导出前面给大家介绍了动态表头的导入，我们了解了如何通过EasyExcel灵活地读取结构不固定的Excel文件。这次，我们将目光转向数据导出——即如何将数据以Excel文件的形式输出…...

编程日记 2025/7/7 12:05:08

Python爬虫使用示例-保存诗人简介到csv文件中

一、获取资源目标网址：（第一页） https://www.shicimingju.com/category/all（后续） https://www.shicimingju.com/category/all_2 https://www.shicimingju.com/category/all_3 ... https://www.shicimingju.com/ca…...

编程日记 2025/7/7 11:13:08

yocto的xxx.bb文件在什么时候会拷贝文件到build目录

在 Yocto 中，.bb 文件用于描述如何构建和安装一个软件包，而文件在构建过程中的拷贝操作通常会在某些特定的步骤中进行。具体来说，文件会在以下几个阶段被拷贝到 build 目录（或者更准确地说，拷贝到目标目录 ${D}&#x…...

编程日记 2025/7/7 12:51:34

Mysql定时数据库备份保姆级教程

目录一、需要解决的问题 1、如何传输文件? 2、如何备份数据库? 3、如何建立一个定时任务? 二、实施步骤 1、建立SSH公钥，实现无密码登录 2、编写备份数据库脚本 3、编写定时任务 MySQL 是一种全球广泛使用的关系型数据库管理系统，它存储的数…...

编程日记 2025/7/7 11:56:25

使用 Grafana 展示多个TiDB集群的告警

作者： yangzhj 原文来源： https://tidb.net/blog/229e283c 背景在日常运维工作中，我们有时需要将多个生产集群的告警信息展示在一起，统一集中观察和分析TiDB 集群的告警情况。本文将通过 Grafana 的多数据源功能来将多个Ti…...

编程日记 2025/7/7 5:35:54

lnmp+discuz论坛附实验：搭建discuz论坛

Inmpdiscuz论坛 Inmp: t: linux操作系统 nr: nginx前端页面 me: mysql数据库账号密码，等等都是保存在这个数据库里面 p: php——nginx擅长处理的是静态页面，页面登录账户，需要请求到数据库，通过php把动态请求转发到数据库 n…...

编程日记 2025/7/7 13:21:30

AI时代的开发新纪元：云开发 Copilot

AI时代的开发新纪元：云开发 Copilot 目录引言：AI时代的开发新纪元低代码与AI的完美融合云开发 Copilot的革命性意义云开发 Copilot 的核心特性解析快速生成应用功能低代码与AI的深度结合实战演练：云开发 Copilot 的应用案例从需求到实现…...

编程日记 2025/7/3 4:57:21

探索 Java 中的 Bug 世界

在 Java 编程的旅程中，我们不可避免地会遇到各种 Bug。这些 Bug 可能会导致程序出现意外的行为、崩溃或者性能问题。了解 Java Bug 的类型、产生原因以及解决方法，对于提高我们的编程技能和开发出稳定可靠的应用程序至关重要。一、Java Bug 的定义与分类…...

编程日记 2025/7/7 0:55:16

【C++】等差数列末项计算题解析及优化

博客主页： [小ᶻ☡꙳ᵃⁱᵍᶜ꙳] 本文专栏: C 文章目录 💯前言💯题目描述与输入输出要求💯数学分析与公式推导公差的计算通项公式推导 💯示例解析解题步骤 💯程序实现与解析初版代码代码解析优点与不足…...

编程日记 2025/7/2 13:32:56

【LeetCode】55.跳跃游戏

文章目录题目链接：题目描述：解题思路（贪心算法）： 题目链接： 55.跳跃游戏题目描述： 解题思路（贪心算法）： 如果某一个位置的元素为N，表示后面N…...

编程日记 2025/7/1 22:37:00

linux基于systemd自启守护进程 systemctl自定义服务傻瓜式教程

系统服务书接上文: linux自启任务详解演示系统:ubuntu 20.04 开发部署项目的时候常常有这样的场景: 业务功能以后台服务的形式提供,部署完成后可以随着系统的重启而自动启动;服务异常挂掉后可以再次拉起这个功能在ubuntu系统中通常由systemd提供如果仅仅需要达成上述的场…...

编程日记 2025/7/6 14:45:10

SparkSQL编程实践

文章目录 SparkSQL编程实践1.1. 编程模型介绍1.2. SparkSQL编程1.2.1. 第三方库安装1.2.2. SparkSQL程序的结构1.2.3. SparkSQL执行模式1.2.3.1. Local模式1.2.3.2. 集群模式 1.2.4. 数据加载1.2.4.1. 通过RDD创建DataFrame1.2.4.2. 通过读取数据外部数据创建DataFrame标准读取…...

编程日记 2025/7/3 12:41:32

模型训练数据-MinerU一款Pdf转Markdown软件

模型训练数据-MinerU一款Pdf转Markdown软件-说明简介： MinerU是什么 MinerU是上海人工智能实验室OpenDataLab团队推出的开源智能数据提取工具，专注于复杂PDF文档的高效解析与提取。MinerU能将包含图片、公式、表格等元素的多模态PDF文档转化为易于分析…...

编程日记 2025/7/1 1:25:01

shell基础用法

shell基础知识 shell中的多行注释 :<<EOF read echo $REPLY # read不指定变量，则默认写入$REPLY EOF # :<<EOF ...EOF 多行注释，EOF可以替换为！# 等文件目录和执行目录 echo $0$0 # ./demo.sh echo $0的realpath$(realpath…...

编程日记 2025/7/5 8:48:38

Redisson分布式锁

概览个人博客源地址 Redisson不只是一个 Java Redis 客户端，它是一个以内存 Redis 服务器作为后端的处理 Java 对象(如 java.util.List, java.util.Map, java.util.Set, java.util.concurrent.locks.Lock 等)的一个框架。 Redisson提供了使用Redis的最简单和最…...

编程日记 2025/7/5 14:10:50

【C语言--趣味游戏系列】--电脑关机整蛊小游戏

前言： 老铁们，还是那句话，学习很苦游戏来补， 为了提高大家与朋友之间的友谊，博主在这里分享一个电脑关机的恶作剧小游戏，快拿去试试吧！！！ 目录： 1.电脑关机代…...

编程日记 2025/7/6 8:14:29

C#实现一个HttpClient集成通义千问-开发前准备

集成一个在线大模型（如通义千问），来开发一个chat对话类型的ai应用，我需要先了解OpenAI的API文档，请求和返回的参数都是以相关接口文档的标准进行的相关文档 OpenAI API文档 https://platform.openai.com/docs/api-…...

编程日记 2025/7/2 23:33:38

二叉树优选算法（一）

一、根据二叉树创建字符串题目介绍： 给你二叉树的根节点 root ，请你采用前序遍历的方式，将二叉树转化为一个由括号和整数组成的字符串，返回构造出的字符串。空节点使用一对空括号对 "()" 表示，转化后需…...

编程日记 2025/7/4 9:18:50

单片机C51--笔记8-STC89C51RC/RD-IIC协议

一、概述 IIC全称Inter-Integrated Circuit (集成电路总线) 是由PHILIPS公司在80年代开发的两线式串行总线，用于连接微控制器及其外围设备。IIC属于半双工同步通信方式。特点简单性和有效性。由于接口直接在组件之上，因此IIC总线占用的空间非常小…...

编程日记 2025/7/5 6:08:38

HttpUtil的get和post请求

Http工具类 import org.apache.http.Consts; import org.apache.http.HttpEntity; import org.apache.http.HttpResponse; import org.apache.http.client.entity.UrlEncodedFormEntity; import org.apache.http.client.methods.CloseableHttpResponse; import org.apache.ht…...

编程日记 2025/7/4 11:58:43

实现效果

代码实现

相关文章：