【vue2】封装自定义的日历组件(三)之基础添加月份的加减定位到最新月份的第一天
我们在切换月份的时候,希望高亮显示在每个月的第一天上面,这样的效果我们要怎么来实现,其实也很简单,我们先看下实现的效果
实现效果

代码实现
原理就是获取到每月的第一天日期,然后再跟整个的数据进行对比,添加高亮的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】封装自定义的日历组件(三)之基础添加月份的加减定位到最新月份的第一天
我们在切换月份的时候,希望高亮显示在每个月的第一天上面,这样的效果我们要怎么来实现,其实也很简单,我们先看下实现的效果 实现效果 代码实现 原理就是获取到每月的第一天日期,然后再跟整个的数据进行对比ÿ…...
LabVIEW偏心圆筒流变仪测控系统
偏心圆筒流变仪是一种专门研究聚合物熔体在复杂流场中特殊流变行为的先进设备。通过结合硬件控制与LabVIEW软件开发,本系统实现了对流变仪功能的精准控制与数据采集,进一步提高了聚合物加工过程的研究精度和效率。 项目背景 传统的流变测量设备多集中于…...
Runloop
假设你的项目中有关tableView,然后还有一个定时器timer在执行,定时器代码如下: var num 0override func viewDidLoad() {super.viewDidLoad()let timer Timer(timeInterval: 1,target: self,selector: #selector(self.run),userInfo: nil,r…...
SpringBoot的Bean类三种注入方式(附带LomBok注入)
SpringBoot的Bean类三种注入方式(附带LomBok注入) 在 Spring Boot 中,Bean 的注入方式主要包括构造函数注入(Constructor Injection)、字段注入(Field Injection)以及 Setter 方法注入…...
开源向量数据库介绍说明
开源向量数据库 Milvus 特点:分布式、高性能,支持亿级向量检索。 支持的数据类型:文本、图像、音频、视频等。 使用场景:推荐系统、语义搜索、图像搜索。 数据存储后端:支持多种后端,如 SQLite、MySQL、Pos…...
【前端】深度解析 JavaScript 中的 new 关键字与构造函数
博客主页: [小ᶻ☡꙳ᵃⁱᵍᶜ꙳] 本文专栏: 前端 文章目录 💯前言💯构造函数的核心特性💯new 关键字的执行机制💯实例代码与详细解析代码示例代码逐步解析 💯new 的内部执行模拟执行过程的详细解析 &am…...
2024年华中杯数学建模C题基于光纤传感器的平面曲线重建算法建模解题全过程文档及程序
2024年华中杯数学建模 C题 基于光纤传感器的平面曲线重建算法建模 原题再现 光纤传感技术是伴随着光纤及光通信技术发展起来的一种新型传感器技术。它是以光波为传感信号、光纤为传输载体来感知外界环境中的信号,其基本原理是当外界环境参数发生变化时,…...
使用 `typing_extensions.TypeAlias` 简化类型定义:初学者指南
使用 typing_extensions.TypeAlias 简化类型定义:初学者指南 什么是 TypeAlias?安装 typing_extensions示例代码:如何使用 TypeAlias示例 1:为简单类型定义别名示例 2:为复杂类型定义别名示例 3:结合 Union…...
如何快速批量把 PDF 转为 JPG 或其它常见图像格式?
在某些特定场景下,将 PDF 转换为 JPG 图片格式却具有不可忽视的优势。例如,当我们需要在不支持 PDF 查看的设备或软件中展示文档内容时,JPG 图片能够轻松被识别和打开;此外,对于一些网络分享或社交媒体发布的需求&…...
如何在组织中塑造和强化绩效文化?
在组织中塑造和强化绩效文化是一个系统性的工程。 一、明确绩效目标与期望 设定清晰目标 组织应根据自身战略规划,将长期目标分解为具体、可衡量、可实现、相关联、有时限(SMART)的短期和中期绩效目标。例如,一家连锁餐饮企业的…...
OllyDbg、CE简单介绍
基础知识: 想要破解软件,需要一些基础知识: 文件格式:Windows对应PE、Linux对应ELF、IOS对应Mash-0。文件格式是指操作系统规定的每个段(代码段、数据段、堆、栈)的大小、顺序等信息。 汇编语言࿱…...
Python函数——函数的返回值定义语法
一、引言 在Python中,函数的返回值是其核心功能之一,它使得函数能够将计算结果传递给调用者,进而推动程序的逻辑和功能实现。理解和掌握函数的返回值语法,不仅能够提高代码的模块化和可读性,还能使程序更加高效和灵活…...
【Pandas】pandas isna
Pandas2.2 General Top-level missing data 方法描述isna(obj)用于检测数据中的缺失值isnull(obj)用于检测数据中的缺失值notna(obj)用于检测数据中的非缺失值notnull(obj)用于检测数据中的非缺失值 pandas.isna() pandas.isna() 是 Pandas 库中的一个函数,用于…...
mysql 数据库表的大小
mysql 数据库表的大小 Mysql 查看数据库各个表占用空间 mysql如何查看数据库所有表大小 在MySQL中,要查看数据库所有表的大小,可以使用以下方法: 方法一:使用information_schema数据库 首先,通过命令行或图形界面…...
(6)JS-Clipper2之ClipperOffset
1. 描述 ClipperOffset类封装了对打开路径和关闭路径进行偏移(膨胀/收缩)的过程。 这个类取代了现在已弃用的OffsetPaths函数,该函数不太灵活。可以使用不同的偏移量(增量)多次调用Execute方法,而不必重新分配路径。现在可以在一次操作中对开放和封闭路…...
如何在Ubuntu中利用repo和git地址下载获取imx6ull的BSP
01-设置git的用户名和邮箱 git config --global user.name "suwenhao" git config --global user.email "2487872782qq.com"这里不设置的话后面在第5步的repo配置中还是会要求输入,而且以后进行相关操作都要输入,不妨现在就进行配置…...
Ruby On Rails 笔记5——常用验证下
3.Validation Options 3.1 :allow_nil 当验证值为nil时:allow_nil选项会跳过验证 class Coffee < ApplicationRecordvalidates :size, inclusion: { in: %w(small medium large),message: "%{value} is not a valid size" }, allow_nil: true end irb> Cof…...
JS听到了因果的回响
这是我学习JS的第11天了,,,我现在赶着周末学JS,然后还有二十多天就期末了呵呵呵。。。 图片切换模块 思路分析: 这是实现的代码,建议还是把不同的变量定义出来比较合适: //获取三个盒子// 小盒…...
【高中生讲机器学习】28. 集成学习之 Bagging 随机森林!
创建时间:2024-12-09 首发时间:2024-12-09 最后编辑时间:2024-12-09 作者:Geeker_LStar 嘿嘿,你好呀!我又来啦~~ 前面我们讲完了集成学习之 Boooooosting,这篇我们来看看集成学习的另一个分支…...
硬件设计 | Altium Designer软件PCB规则设置
基于Altium Designer(24.9.1)版本 嘉立创PCB工艺加工能力范围说明-嘉立创PCB打样专业工厂-线路板打样 规则参考-嘉立创 注意事项 1.每次设置完规则参数都要点击应用保存 2.每次创建PCB,都要设置好参数 3.可以设置默认规则,将…...
Git-RSCLIP遥感图像分类参数详解:英文标签设计与置信度调优
Git-RSCLIP遥感图像分类参数详解:英文标签设计与置信度调优 1. 模型背景与核心能力 Git-RSCLIP 是北航团队基于 SigLIP 架构开发的遥感图像-文本检索模型,在 Git-10M 数据集(1000万遥感图文对)上完成大规模预训练。它不是传统意…...
基于python框架的船舶物流运输管理系统设计vue
目录船舶物流运输管理系统功能分析(Vue前端)用户管理模块船舶管理功能运输订单管理路径优化模块实时监控看板报表分析功能移动端适配系统集成接口技术栈建议项目技术支持源码获取详细视频演示 :文章底部获取博主联系方式!同行可合…...
GLM-4V-9B GPU高效利用:通过dtype对齐+4-bit量化实现A10G 24GB满载运行
GLM-4V-9B GPU高效利用:通过dtype对齐4-bit量化实现A10G 24GB满载运行 1. 引言 最近在折腾多模态大模型本地部署的朋友,可能都遇到过类似的问题:模型参数动辄几十上百亿,显存要求高得吓人,好不容易找到个能在消费级显…...
DeerFlow参数详解:vLLM服务日志排查(llm.log/bootstrap.log)实战
DeerFlow参数详解:vLLM服务日志排查(llm.log/bootstrap.log)实战 1. 认识DeerFlow:您的智能研究助手 DeerFlow是字节跳动基于LangStack技术框架开发的深度研究开源项目,它就像是您的个人研究团队,整合了语…...
设计师不用写代码了?实测TRAE SOLO Builder如何将Figma稿秒变可交互网页
设计师如何用TRAE SOLO Builder实现零代码网页开发 在数字产品设计领域,设计师与开发者之间的协作断层长期存在。设计精美的Figma稿转化为实际网页时,往往面临还原度不足、交互细节丢失等问题。TRAE SOLO Builder的出现,正在重新定义设计到开…...
DIYables WebApps:面向Arduino的嵌入式WebSocket Web应用框架
1. 项目概述DIYables WebApps 是一个面向教育与快速原型开发的嵌入式 Web 应用框架,专为 Arduino Uno R4 WiFi 与 DIYables STEM V4 IoT 平台深度优化。它并非传统意义上的“Web 服务器库”,而是一套硬件感知、内存敏感、即插即用的 WebSocket Web 应用容…...
SEO_掌握这几个核心技巧让你的SEO事半功倍
<h2>SEO核心技巧:让你的网站事半功倍的秘诀</h2> <p>在当今数字化时代,SEO(搜索引擎优化)已经成为了网站运营者提升网站流量和品牌知名度的关键。SEO 的复杂性常常让新手感到困惑,不知道从哪里入手。…...
BepInEx Linux环境实战指南:从部署到故障解决
BepInEx Linux环境实战指南:从部署到故障解决 【免费下载链接】BepInEx Unity / XNA game patcher and plugin framework 项目地址: https://gitcode.com/GitHub_Trending/be/BepInEx 引言:Linux玩家的Mod困境 作为Linux平台的Unity游戏玩家&…...
技术洞察:如何通过数据预处理优化clip命令行图表生成性能
技术洞察:如何通过数据预处理优化clip命令行图表生成性能 【免费下载链接】clip Create charts from the command line 项目地址: https://gitcode.com/gh_mirrors/cli/clip 在数据可视化领域,clip作为一个命令行驱动的图表生成工具,为…...
嵌入式系统中void指针与函数指针的高级应用
void指针与函数指针在嵌入式系统中的高级应用1. void指针的工程应用1.1 void指针的本质特性void指针(void*)在C语言中表示一个"不知道类型"的指针变量,其核心特性在于:int nums[] {3, 5, 6, 7, 9}; void* ptr1 nums; int* ptr2 (int*)nums;…...
