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

【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】封装自定义的日历组件(三)之基础添加月份的加减定位到最新月份的第一天

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

LabVIEW偏心圆筒流变仪测控系统

偏心圆筒流变仪是一种专门研究聚合物熔体在复杂流场中特殊流变行为的先进设备。通过结合硬件控制与LabVIEW软件开发&#xff0c;本系统实现了对流变仪功能的精准控制与数据采集&#xff0c;进一步提高了聚合物加工过程的研究精度和效率。 项目背景 传统的流变测量设备多集中于…...

Runloop

假设你的项目中有关tableView&#xff0c;然后还有一个定时器timer在执行&#xff0c;定时器代码如下&#xff1a; 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类三种注入方式&#xff08;附带LomBok注入&#xff09; 在 Spring Boot 中&#xff0c;Bean 的注入方式主要包括构造函数注入&#xff08;Constructor Injection&#xff09;、字段注入&#xff08;Field Injection&#xff09;以及 Setter 方法注入&#xf…...

开源向量数据库介绍说明

开源向量数据库 Milvus 特点&#xff1a;分布式、高性能&#xff0c;支持亿级向量检索。 支持的数据类型&#xff1a;文本、图像、音频、视频等。 使用场景&#xff1a;推荐系统、语义搜索、图像搜索。 数据存储后端&#xff1a;支持多种后端&#xff0c;如 SQLite、MySQL、Pos…...

【前端】深度解析 JavaScript 中的 new 关键字与构造函数

博客主页&#xff1a; [小ᶻ☡꙳ᵃⁱᵍᶜ꙳] 本文专栏: 前端 文章目录 &#x1f4af;前言&#x1f4af;构造函数的核心特性&#x1f4af;new 关键字的执行机制&#x1f4af;实例代码与详细解析代码示例代码逐步解析 &#x1f4af;new 的内部执行模拟执行过程的详细解析 &am…...

2024年华中杯数学建模C题基于光纤传感器的平面曲线重建算法建模解题全过程文档及程序

2024年华中杯数学建模 C题 基于光纤传感器的平面曲线重建算法建模 原题再现 光纤传感技术是伴随着光纤及光通信技术发展起来的一种新型传感器技术。它是以光波为传感信号、光纤为传输载体来感知外界环境中的信号&#xff0c;其基本原理是当外界环境参数发生变化时&#xff0c…...

使用 `typing_extensions.TypeAlias` 简化类型定义:初学者指南

使用 typing_extensions.TypeAlias 简化类型定义&#xff1a;初学者指南 什么是 TypeAlias&#xff1f;安装 typing_extensions示例代码&#xff1a;如何使用 TypeAlias示例 1&#xff1a;为简单类型定义别名示例 2&#xff1a;为复杂类型定义别名示例 3&#xff1a;结合 Union…...

如何快速批量把 PDF 转为 JPG 或其它常见图像格式?

在某些特定场景下&#xff0c;将 PDF 转换为 JPG 图片格式却具有不可忽视的优势。例如&#xff0c;当我们需要在不支持 PDF 查看的设备或软件中展示文档内容时&#xff0c;JPG 图片能够轻松被识别和打开&#xff1b;此外&#xff0c;对于一些网络分享或社交媒体发布的需求&…...

如何在组织中塑造和强化绩效文化?

在组织中塑造和强化绩效文化是一个系统性的工程。 一、明确绩效目标与期望 设定清晰目标 组织应根据自身战略规划&#xff0c;将长期目标分解为具体、可衡量、可实现、相关联、有时限&#xff08;SMART&#xff09;的短期和中期绩效目标。例如&#xff0c;一家连锁餐饮企业的…...

OllyDbg、CE简单介绍

基础知识&#xff1a; 想要破解软件&#xff0c;需要一些基础知识&#xff1a; 文件格式&#xff1a;Windows对应PE、Linux对应ELF、IOS对应Mash-0。文件格式是指操作系统规定的每个段&#xff08;代码段、数据段、堆、栈&#xff09;的大小、顺序等信息。 汇编语言&#xff1…...

Python函数——函数的返回值定义语法

一、引言 在Python中&#xff0c;函数的返回值是其核心功能之一&#xff0c;它使得函数能够将计算结果传递给调用者&#xff0c;进而推动程序的逻辑和功能实现。理解和掌握函数的返回值语法&#xff0c;不仅能够提高代码的模块化和可读性&#xff0c;还能使程序更加高效和灵活…...

【Pandas】pandas isna

Pandas2.2 General Top-level missing data 方法描述isna(obj)用于检测数据中的缺失值isnull(obj)用于检测数据中的缺失值notna(obj)用于检测数据中的非缺失值notnull(obj)用于检测数据中的非缺失值 pandas.isna() pandas.isna() 是 Pandas 库中的一个函数&#xff0c;用于…...

mysql 数据库表的大小

mysql 数据库表的大小 Mysql 查看数据库各个表占用空间 mysql如何查看数据库所有表大小 在MySQL中&#xff0c;要查看数据库所有表的大小&#xff0c;可以使用以下方法&#xff1a; 方法一&#xff1a;使用information_schema数据库 首先&#xff0c;通过命令行或图形界面…...

(6)JS-Clipper2之ClipperOffset

1. 描述 ClipperOffset类封装了对打开路径和关闭路径进行偏移(膨胀/收缩)的过程。 这个类取代了现在已弃用的OffsetPaths函数&#xff0c;该函数不太灵活。可以使用不同的偏移量(增量)多次调用Execute方法&#xff0c;而不必重新分配路径。现在可以在一次操作中对开放和封闭路…...

如何在Ubuntu中利用repo和git地址下载获取imx6ull的BSP

01-设置git的用户名和邮箱 git config --global user.name "suwenhao" git config --global user.email "2487872782qq.com"这里不设置的话后面在第5步的repo配置中还是会要求输入&#xff0c;而且以后进行相关操作都要输入&#xff0c;不妨现在就进行配置…...

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天了&#xff0c;&#xff0c;&#xff0c;我现在赶着周末学JS&#xff0c;然后还有二十多天就期末了呵呵呵。。。 图片切换模块 思路分析&#xff1a; 这是实现的代码&#xff0c;建议还是把不同的变量定义出来比较合适&#xff1a; //获取三个盒子// 小盒…...

【高中生讲机器学习】28. 集成学习之 Bagging 随机森林!

创建时间&#xff1a;2024-12-09 首发时间&#xff1a;2024-12-09 最后编辑时间&#xff1a;2024-12-09 作者&#xff1a;Geeker_LStar 嘿嘿&#xff0c;你好呀&#xff01;我又来啦~~ 前面我们讲完了集成学习之 Boooooosting&#xff0c;这篇我们来看看集成学习的另一个分支…...

硬件设计 | Altium Designer软件PCB规则设置

基于Altium Designer&#xff08;24.9.1&#xff09;版本 嘉立创PCB工艺加工能力范围说明-嘉立创PCB打样专业工厂-线路板打样 规则参考-嘉立创 注意事项 1.每次设置完规则参数都要点击应用保存 2.每次创建PCB&#xff0c;都要设置好参数 3.可以设置默认规则&#xff0c;将…...

[2025CVPR]DeepVideo-R1:基于难度感知回归GRPO的视频强化微调框架详解

突破视频大语言模型推理瓶颈,在多个视频基准上实现SOTA性能 一、核心问题与创新亮点 1.1 GRPO在视频任务中的两大挑战 ​安全措施依赖问题​ GRPO使用min和clip函数限制策略更新幅度,导致: 梯度抑制:当新旧策略差异过大时梯度消失收敛困难:策略无法充分优化# 传统GRPO的梯…...

大话软工笔记—需求分析概述

需求分析&#xff0c;就是要对需求调研收集到的资料信息逐个地进行拆分、研究&#xff0c;从大量的不确定“需求”中确定出哪些需求最终要转换为确定的“功能需求”。 需求分析的作用非常重要&#xff0c;后续设计的依据主要来自于需求分析的成果&#xff0c;包括: 项目的目的…...

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

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

【WiFi帧结构】

文章目录 帧结构MAC头部管理帧 帧结构 Wi-Fi的帧分为三部分组成&#xff1a;MAC头部frame bodyFCS&#xff0c;其中MAC是固定格式的&#xff0c;frame body是可变长度。 MAC头部有frame control&#xff0c;duration&#xff0c;address1&#xff0c;address2&#xff0c;addre…...

解锁数据库简洁之道:FastAPI与SQLModel实战指南

在构建现代Web应用程序时&#xff0c;与数据库的交互无疑是核心环节。虽然传统的数据库操作方式&#xff08;如直接编写SQL语句与psycopg2交互&#xff09;赋予了我们精细的控制权&#xff0c;但在面对日益复杂的业务逻辑和快速迭代的需求时&#xff0c;这种方式的开发效率和可…...

视频字幕质量评估的大规模细粒度基准

大家读完觉得有帮助记得关注和点赞&#xff01;&#xff01;&#xff01; 摘要 视频字幕在文本到视频生成任务中起着至关重要的作用&#xff0c;因为它们的质量直接影响所生成视频的语义连贯性和视觉保真度。尽管大型视觉-语言模型&#xff08;VLMs&#xff09;在字幕生成方面…...

数据链路层的主要功能是什么

数据链路层&#xff08;OSI模型第2层&#xff09;的核心功能是在相邻网络节点&#xff08;如交换机、主机&#xff09;间提供可靠的数据帧传输服务&#xff0c;主要职责包括&#xff1a; &#x1f511; 核心功能详解&#xff1a; 帧封装与解封装 封装&#xff1a; 将网络层下发…...

Element Plus 表单(el-form)中关于正整数输入的校验规则

目录 1 单个正整数输入1.1 模板1.2 校验规则 2 两个正整数输入&#xff08;联动&#xff09;2.1 模板2.2 校验规则2.3 CSS 1 单个正整数输入 1.1 模板 <el-formref"formRef":model"formData":rules"formRules"label-width"150px"…...

使用 Streamlit 构建支持主流大模型与 Ollama 的轻量级统一平台

🎯 使用 Streamlit 构建支持主流大模型与 Ollama 的轻量级统一平台 📌 项目背景 随着大语言模型(LLM)的广泛应用,开发者常面临多个挑战: 各大模型(OpenAI、Claude、Gemini、Ollama)接口风格不统一;缺乏一个统一平台进行模型调用与测试;本地模型 Ollama 的集成与前…...

CSS设置元素的宽度根据其内容自动调整

width: fit-content 是 CSS 中的一个属性值&#xff0c;用于设置元素的宽度根据其内容自动调整&#xff0c;确保宽度刚好容纳内容而不会超出。 效果对比 默认情况&#xff08;width: auto&#xff09;&#xff1a; 块级元素&#xff08;如 <div>&#xff09;会占满父容器…...