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

vue框架

news 来源：原创 2025/7/15 12:09:28

以下是一个简单的基于Vue框架的日历组件示例：

<template><div class="calendar"><div class="header"><button @click="prevMonth"><</button><h2>{{ currentMonth }}</h2><button @click="nextMonth">></button></div><table><thead><tr><th v-for="day in daysOfWeek" :key="day">{{ day }}</th></tr></thead><tbody><tr v-for="week in calendar" :key="week"><td v-for="date in week" :key="date" :class="{ 'today': isToday(date), 'selected': isSelected(date) }" @click="selectDate(date)">{{ date.getDate() }}</td></tr></tbody></table></div>
</template><script>
export default {data() {return {currentMonth: new Date(),daysOfWeek: ['Sun', 'Mon', 'Tue', 'Wed', 'Thu', 'Fri', 'Sat'],};},computed: {calendar() {const calendarData = [];const year = this.currentMonth.getFullYear();const month = this.currentMonth.getMonth();const firstDayOfMonth = new Date(year, month, 1);const lastDayOfMonth = new Date(year, month + 1, 0);const numberOfDaysInMonth = lastDayOfMonth.getDate();const firstWeekday = firstDayOfMonth.getDay();let currentDay = 1;for (let week = 0; week < 6; week++) {const rowData = [];if (week === 0) {for (let i = 0; i < 7; i++) {if (i >= firstWeekday) {rowData.push(new Date(year, month, currentDay++));} else {rowData.push(null);}}} else {for (let i = 0; i < 7; i++) {if (currentDay <= numberOfDaysInMonth) {rowData.push(new Date(year, month, currentDay++));} else {rowData.push(null);}}}calendarData.push(rowData);}return calendarData;},},methods: {prevMonth() {const prevMonth = new Date(this.currentMonth.getFullYear(), this.currentMonth.getMonth() - 1);this.currentMonth = prevMonth;},nextMonth() {const nextMonth = new Date(this.currentMonth.getFullYear(), this.currentMonth.getMonth() + 1);this.currentMonth = nextMonth;},isToday(date) {const today = new Date();return date.toDateString() === today.toDateString();},isSelected(date) {// Your logic to check if a date is selected or not},selectDate(date) {// Your logic to handle when a date is selected},},
};
</script><style scoped>
.calendar {font-family: Arial, sans-serif;
}.header {display: flex;justify-content: center;align-items: center;margin-bottom: 10px;
}table {width: 100%;border-collapse: collapse;
}th,
td {padding: 5px;text-align: center;
}.today {background-color: lightblue;
}.selected {background-color: yellow;
}
</style>

这个日历组件包括以下功能：

显示当前月份的日历
可以通过左右箭头按钮切换月份
当天日期用不同颜色标识
可以选择日期，并用不同颜色标识选择的日期

你可以根据自己的需求进行修改和扩展。

vue框架

以下是一个简单的基于Vue框架的日历组件示例： <template><div class"calendar"><div class"header"><button click"prevMonth"><</button><h2>{{ currentMonth }}</h2><button cli…...

编程日记 2025/7/15 12:09:28

1. 注册 # settings.pyINSTALLED_APPS [,rest_framework, ]2. 路由 from django.urls import pathurlpatterns [path(task/, views.TaskAPIView.as_view()) ]3. 视图 from rest_framework.views import APIView from rest_framework.response import Responseclass TaskAPIV…...

编程日记 2025/7/12 19:03:22

git commit -m “Add user login feature“

当然，这条命令是 Git 中用来提交更改的基本命令，其中包含了一些注释来解释命令的各个部分。下面是对这条命令的详细解释： git commit -m "-m指的是message，git要求每次提交都需要写一下日志"git commit： 这…...

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

mac: docker : Command not found解决

描述: 安装docker但是docker命令显示Command not found 分析: mac没有配置对应的环境变量解决方案: 打开配置文件: vim ~/.zshrc写docker环境变量: export PATH"/Applications/Docker.app/Contents/Resources/bin:$PATH"保存退出: esc,输入wq,按enter 配置文…...

编程日记 2025/7/15 12:01:48

深入解析 HTML Input 元素：构建交互性表单的核心

🤍 前端开发工程师、技术日更博主、已过CET6 🍨 阿珊和她的猫_CSDN博客专家、23年度博客之星前端领域TOP1 🕠 牛客高级专题作者、打造专栏《前端面试必备》、《2024面试高频手撕题》 🍚 蓝桥云课签约作者、上架课程《Vue.js 和 E…...

编程日记 2025/6/28 20:08:42

Docker--Docker Registry(镜像仓库）

什么是Docker Registry？ 镜像仓库（Docker Registry）是Docker生态系统中用于存储、管理和分发Docker镜像的关键组件。镜像仓库主要负责存储Docker镜像，这些镜像包含了应用程序及其相关的依赖项和配置，是构建和运行Doc…...

编程日记 2025/7/15 11:53:33

Linux 统信UOS 设置程序“桌面快捷方式”与“开机自启动”

最近在统信uos系统 arm64架构上进行QT程序的开发，基本开发完毕后，开始着手准备程序的开机自启动模块，因为一般来说，程序在客户现场使用都是需要开机自启的。然后在百度海淘，很少有这类相关的博客介绍，有一…...

编程日记 2025/7/15 1:17:27

React开发高级篇 - React Hooks以及自定义Hooks实现思路

Hooks介绍 Hooks是react16.8以后新增的钩子API； 目的：增加代码的可复用性，逻辑性，弥补无状态组件没有生命周期，没有数据管理状态state的缺陷。为什么要使用Hooks？ 开发友好，可扩展性强&#…...

编程日记 2025/7/15 11:47:52

shell条件测试

一.命令执行结果判定 && 在命令执行后如果没有任何报错时会执行符号后面的动作 || 在命令执行后如果命令有报错会执行符号后的动作示例： [rootqingdeng shell3]# sh sl.sh /mnt/file is not exist no二.条件判断方法在 shell 程序中，用户可…...

编程日记 2025/7/15 11:59:39

嵌入式蓝桥杯学习5 定时中断实现按键

Cubemx配置打开cubemx。前面的配置与前文一样，这里主要配置基本定时器的定时功能。 1.在Timer中点击TIM6，勾选activated。配置Parameter Settings中的预分频器（PSC）和计数器（auto-reload Register） 补…...

编程日记 2025/7/15 11:07:09

Linux下进程地址空间

文章目录 1. 进程地址空间分布2. 为什么要有进程地址空间一、主要功能二、重要特性三、应用场景四、与TLB的交互 3. 进程具有独立性以x86(32位)为例子 1. 进程地址空间分布进程地址空间，本质是一个描述进程可视范围的大小。地址空间本质是一个内核数据结构,类似…...

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

基于SpringBoot的养老院管理系统的设计与实现

一、前言随着人口老龄化的加剧，养老院作为老年人养老的重要场所，其管理的高效性和科学性显得尤为重要。传统的养老院管理方式多依赖人工操作，存在信息记录不及时、不准确，管理流程繁琐，资源调配困难等问题。利用信息技…...

编程日记 2025/7/9 13:32:53

GA-Kmeans-Transformer-GRU时序聚类+状态识别组合模型，创新发文无忧！

GA-Kmeans-Transformer-GRU时序聚类状态识别组合模型，创新发文无忧！ 目录 GA-Kmeans-Transformer-GRU时序聚类状态识别组合模型，创新发文无忧！效果一览基本介绍程序设计参考资料效果一览基本介绍 1.GA-Kmeans-Transformer-GRU时…...

编程日记 2025/6/28 20:22:07

Hadoop单机搭建手册

hadoop搭建安装指导手册，包含hadoop-3.1.1、hive-3.1.0、zookeeper-3.4.6、hbase-2.3.0、spark-3.3.0等组件版本。文档详细21页，附带所有软件包。笔者发现很多人对于如何快速高效的单机搭建不太清楚，所以笔者整理了这个文档，希望可…...

编程日记 2025/7/15 6:03:26

【射频IC进阶实践教程】2.6 LNA版图设计及DRC/LVS验证

射频集成电路的版图设计非常关键，他对寄生参数非常敏感，需要使其最小化。还需要注意相互耦合的方式本次课程主要介绍射频IC的一些相关布局和连线方面的考虑。一、版图设计 1. 版图的元件布局首先打开对应的原理图点击进行版图设计由于已经有做好的…...

编程日记 2025/7/15 1:37:45

mac下载安装jdk

背景长时间不折腾mac全部忘记特此记录安装 1.下载jdk 根据需要下载对应的jdk 我直接下载到/Applicatiions目录 https://www.oracle.com/java/technologies/downloads/#java8-mac 2.解压 cd /Applicatiions tar -zxvf jdk-8u431-macosx-x64.tar.gz 3.配置环境 …...

编程日记 2025/7/10 2:05:48

【uniapp】swiper切换时，v-for重新渲染页面导致文字在视觉上的拉扯问题

问题描述先用v-for渲染了几个列表，但这几个列表是占同一个位置的，只是通过切换swiper来显示哪个列表显示，也就是为了优化页面切换时候，没有根据swiper的current再更新v-for的数据，但现在就有个问题，怎么隐…...

编程日记 2025/7/10 1:16:53

shell自动显示当前git的branch

效果简介： 1. 如果没在git仓库，显示无变化 2. 如果在git仓库，显示当前分支实现方法： 在~/.bashrc 里添加： function git_branch { test -d .git && branch"git branch | grep "^\*" | sed…...

编程日记 2025/7/15 1:25:24

使用 Acme.sh 自动生成和续签免费 SSL 证书（含通配符支持）

Acme.sh 是一个开源的脚本，能够从 ZeroSSL、Let’s Encrypt 等证书颁发机构（CA）获取免费的 HTTPS 证书。该脚本特别简单易用，并且支持多种验证方式。下面将详细介绍使用 Acme.sh 生成、安装和更新证书的各个步骤。 Github地址使用…...

编程日记 2025/7/9 23:22:38

【JAVA】Java高级：Spring框架与Java EE—Web开发基础（Servlet、JSP）

Java作为一种广泛使用的编程语言，提供了强大的Web开发框架和技术，其中Servlet和JSP（JavaServer Pages）是构建动态Web应用的基础。了解这些技术对于任何想要深入Java Web开发的程序员来说都是必不可少的。一、Web开发的重要性动…...

编程日记 2025/7/10 16:34:47

pytorch生成对抗网络

# 生成对抗网络 import os import torch import torchvision import torch.nn as nn from torchvision import transforms from torchvision.utils import save_image # Device configuration device torch.device(cuda if torch.cuda.is_available() else cpu) # 超参数 late…...

编程日记 2025/7/14 10:51:51

flask简易版的后端服务创建接口(python)

1.pip install安装Flask和CORS 2.创建http_server.py文件，内容如下 """ ============================ 简易版的后端服务 ============================ """ from flask import Flask, request, jsonify from flask_cors import CORS app = F…...

编程日记 2025/7/9 4:13:42

gitlab 生成并设置 ssh key

一、介绍 🎯 本文主要介绍 SSH Key 的生成方法，以及如何在GitLab上添加SSH Key。GitLab 使用SSH协议与Git 进行安全通信。当您使用 SSH密钥对 GitLab远程服务器进行身份验证时，您不需要每次都提供您的用户名和密码。SSH使用两个密钥&#x…...

编程日记 2025/7/14 9:09:06

ssh远程升级Ubuntu20.04到Ubuntu 22.04

ssh远程升级Ubuntu20.04到Ubuntu 22.04 陈拓 2024/10/16-2024/10/26 1. 简介本文介绍了如何通过ssh将Ubuntu系统从20.04升级到22.04。在进行系统升级之前，建议备份重要数据，以防升级过程中出现问题。 2. 更新当前系统硬件系统架构当前操作系统版…...

编程日记 2025/7/13 11:07:56

Qt开源控件：图像查看器工具V1.1

一、项目概述本项目是一款基于 Qt 框架开发的图像查看工具，可以显示带坐标轴的图像，并实时获取图像中任意像素点的坐标和颜色信息。工具具有图像缩放、动态坐标轴绘制、鼠标交互等功能，使用起来方便直观。二、功能亮点 1. 图像加载与显…...

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

【WRF-Urban】SLUCM新增空间分布城市冠层参数及人为热排放AHF代码详解（下）

目录详细解释更改文件内容4 运行模块（run）:README.namelist5 输出模块（share）:share/module_check_a_mundo.Fshare/output_wrf.F参考SLUCM新增空间分布城市冠层参数及人为热排放AHF代码详解的前两部分内容可参见-【WRF-Urban】SLUCM新增空间分布城市冠层参数及人为热排放A…...

编程日记 2025/7/9 22:08:01

【C#】新建窗体文件，Form、UserControl

从用途、功能性和架构方面进行描述。 1. 继承自 Form 的窗体（通常是窗口）： 在 C# 中，Form 是用于创建应用程序的主窗口或对话框窗口的类。当您继承自 Form 时，您创建的是一个完整的窗口，可以显示内容、与…...

编程日记 2025/7/15 8:55:42

优化SEO策略掌握长尾关键词的力量

内容概要在数字营销领域，SEO（搜索引擎优化）是帮助网站获得更多流量的关键。然而，随着在线竞争的加剧，单纯依赖短尾关键词已难以满足用户的搜索需求。这时，长尾关键词的引入便显得尤为重要。长尾关键词通常…...

编程日记 2025/7/14 4:09:39

MySQL分页查询

分页查询： 数据记录条数过多的时候，需要分页来显示。语法： select 查询字段 from 表名 where ....等等前面学过的所有写法 limit offset（开始记录索引,是从0开始的）,size（要取出的条数）&…...

编程日记 2025/7/15 2:48:28

执行“go mod tidy”遇到“misbehavior”错误

执行“go mod tidy”报错下错误，执行“go clean -modcache”和删除“go env GOMODCACHE”指定目录均无效： SECURITY ERROR go.sum database server misbehavior detected!old database:go.sum database tree3397826xyyhzdyAOat5li/EXx/MK1gONQf3LAGqArh…...

编程日记 2025/7/9 7:46:51

【机器学习】——windows下安装anaconda并在vscode上进行配置

一、安装anaconda 1.进入清华的镜像网站，下载自己电脑对应的anaconda版本。网站：https://repo.anaconda.com/archive/ 这里我下载的版本是anaconda3-2024.10-1-Windows-x86-64 2.下载完毕后开始安装anaconda 3.配置anaconda环境变量在设置中找到编…...

编程日记 2025/7/13 6:24:44

第6章：布局 --[CSS零基础入门]

CSS 布局是网页设计中至关重要的一个方面，它决定了页面上元素的排列和展示方式。以下是几种常见的 CSS 布局方法和技术： 1. 浮动布局（Float Layout） 浮动布局（Float Layout）曾经是网页设计中创建多列布局…...

编程日记 2025/7/13 18:41:15

kubeadm安装K8s集群基础环境配置

kubeadm安装K8s集群基础环境配置 1.首先确保所有机器可以通信，然后配置主机hosts文件；2.关闭所有节点关闭防火墙、selinux、swap；3.将桥接的IPv4流量传递到 iptables；4.安装常用工具包；5.安装时间同步工具ntpdate&…...

编程日记 2025/7/10 8:58:17

计算机毕业设计Python医疗问答系统医疗可视化 BERT+LSTM+CRF深度学习识别模型机器学习深度学习爬虫知识图谱人工智能大数据毕业设计

温馨提示：文末有 CSDN 平台官方提供的学长联系方式的名片！ 温馨提示：文末有 CSDN 平台官方提供的学长联系方式的名片！ 温馨提示：文末有 CSDN 平台官方提供的学长联系方式的名片！ 作者简介：Java领…...

编程日记 2025/7/14 0:04:06

学在西电录播课使用python下载，通过解析m3u8协议、多线程下载ts视频块以及ffmpeg合并

本文涵盖的内容仅供个人学习使用，如果侵犯学校权利，麻烦联系我删除。初衷研究生必修选逃， 期末复习怕漏过重点题目，但是看学在西电的录播回放课一卡一卡的，于是想在空余时间一个个下载下来，然后到时候就…...

编程日记 2025/7/8 8:34:28

攻防世界杂项刷题笔记（引导模式）13-23

引言：14包括提取文件和流量分析，22很新颖！！其他的都是常规隐写 13.base64stego 经过上一次如来十三掌的磨练，这题在看到题干“十三掌”的时候我是丝毫不慌张的。附件给了压缩包，考虑是不是伪加密&#xf…...

编程日记 2025/7/9 0:03:23

基于单片机的智能农田灌溉节水系统设计及应用

摘要 ： 针对传统的灌溉方法浪费水资源节水系统设计。该系统从节水角度出发，对传感器和主电路进行了设计，主要采集灌溉地的湿度与温度数据，根据测量土壤中的温度与湿度作为主要参数，对农田灌溉节水系统进行实时控制&am…...

编程日记 2025/7/4 16:54:52

高校毕业生离校就业数据分析管理平台的设计与实现（Java毕业设计）教务管理、就业统计

系统合集跳转源码获取链接一、系统环境运行环境: 最好是java jdk 1.8，我们在这个平台上运行的。其他版本理论上也可以。 IDE环境： Eclipse,Myeclipse,IDEA或者Spring Tool Suite都可以 tomcat环境： Tomcat 7.x,8.x,9.x版本均可操作系统…...

编程日记 2025/7/13 19:23:42

1、SQL语言

分类方式类别描述部署方式嵌入式/单机/双机/集群/分布式/云数据库业务类型 OLTP数据库/OLAP数据库/流数据库/时序数据库存储介质内存数据库/磁盘数据库/SSD数据库/SCM数据库年代第一代是单机数据库/第二代是集群数据库/第三代是分布式数据库和云原生数据库/第…...

编程日记 2025/7/8 18:54:05

spark sql 环境安装，java 默认路径和安装配置！

yum安装java 查看默认路径 update-alternatives --config java # Java 环境变量 export JAVA_HOME/usr/lib/jvm/java-1.8.0-openjdk-1.8.0.412.b08-1.el7_9.x86_64/jreexport PATH$JAVA_HOME/bin:$PATH# Spark 环境变量 export SPARK_HOME/home/vagrant/soft/sparkexport PATH…...

编程日记 2025/7/14 4:53:05

【CMD、PowerShell和Bash设置代理】

【CMD、PowerShell和Bash设置代理】 1. CMD（命令提示符）临时设置代理（只对当前会话有效）：查看当前代理设置：清除临时代理设置：永久设置代理（对所有新的 CMD 会话有效）&am…...

编程日记 2025/7/6 13:57:48

分区之间的一种度量方法-覆盖度量（Covering Metric）

分区之间的一种度量方法——覆盖度量（Covering Metric），用于量化一个分区如何被另一个分区覆盖或近似。以下是逐步详细解释： 1. 背景与符号说明分区的概念： 分区是将一个集合（这里是 { 1 , … , n } \{…...

编程日记 2025/7/8 16:55:02

HarmonyOS(64) wrapBuilder 全局@Builder使用利器

WrapBuilder 全局Builder是什么什么时候使用wrapBuilderBuilder的限制参考资料全局Builder是什么局部Builder的定义方法如下： //定义局部Builder Builder MyBuilderFunction() {} //使用方法 this.MyBuilderFunction()全局Builder定义语法如下： //全…...

编程日记 2025/7/11 3:41:27

【计算机毕设】基于Spark猫眼电影票房数据分析预测推荐系统（完整系统源码+数据库+开发笔记+详细部署教程+虚拟机分布式启动教程）✅

目录【计算机毕设】基于Spark猫眼电影票房数据分析预测推荐系统（完整系统源码数据库开发笔记详细部署教程虚拟机分布式启动教程）✅ 一、项目背景二、研究目的三、项目意义四、项目功能五、项目创新点六、开发技术介绍七、算法介绍八、数…...

编程日记 2025/7/8 22:50:46

问卷调查模板

<!DOCTYPE html> <html lang"en"><head><meta charset"UTF-8"><meta name"viewport" content"widthdevice-width, initial-scale1.0"><title>问卷调查</title><style>body {font-fam…...

编程日记 2025/7/12 20:10:53

hadoop单机安装

步骤 1：安装 Java 安装 OpenJDK bash sudo yum install -y java-1.8.0-openjdk 验证 Java 安装 bash java -version 输出类似以下内容表示成功： arduino openjdk version “1.8.0_xxx” 步骤 2：下载 Hadoop 下载 Hadoop 安装包前往 Hadoop 官方下载页面，获取最新稳…...

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

Android笔记【15】跳转页面返回信息

一、问题学习一段代码 val intent Intent(thisSecondActivity, MainActivity::class.java) intent.putExtra("extra_data", data) startActivity(intent) 二、内容这段代码是在 Android 应用中启动一个新的活动（Activity），具…...

编程日记 2025/7/10 19:22:32

MATLAB深度学习(七)——ResNet残差网络

一、ResNet网络 ResNet是深度残差网络的简称。其核心思想就是在，每两个网络层之间加入一个残差连接，缓解深层网络中的梯度消失问题二、残差结构在多层神经网络模型里，设想一个包含诺干层自网络，子网络的函数用H(x)来表示&#x…...

编程日记 2025/7/9 9:18:55

推荐几种主流数据仓库：深度剖析与对比

引言随着数据量的不断增长，数据仓库技术在企业的数据管理和分析中扮演着越来越重要的角色。不同的数据仓库系统在性能、架构、功能和适用场景上各有特点。本文将详细介绍目前市场上几种主流的数据仓库，帮助你更好地了解各个数据仓库的特性，选…...

编程日记 2025/7/8 17:54:58

编译原理——词法分析器的实现

实验目的深入理解有限自动机及其应用编辑一个词法分析器，了解计算机识别源程序字符串的过程。实验内容和要求实验内容：处理c语言源程序，对源程序进行编译预处理（去除注释、无用的回车换行找到包含的文件等）之后&a…...

编程日记 2025/7/12 23:03:10

相关文章：