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

Vue样式绑定与条件渲染详

news 来源：原创 2025/7/3 8:12:33

一、Vue样式绑定

在Vue中，我们可以通过多种方式动态地绑定样式，让界面根据数据状态变化而自动更新样式。

1. class样式绑定

(1) 字符串写法

适用场景：样式的类名不确定，需要动态指定

<template><div><!-- 绑定class样式--字符串写法 --><div class="basic" v-bind:class="styleDyn" @click="changeStyle">{{name}}</div></div>
</template><script>
export default {data() {return {name: 'Vue样式绑定示例',styleDyn: 'normal'}},methods: {changeStyle() {this.styleDyn = this.styleDyn === 'normal' ? 'active' : 'normal';}}
}
</script><style>
.basic {width: 200px;height: 50px;line-height: 50px;text-align: center;border: 1px solid #ccc;margin-bottom: 10px;
}
.normal {background-color: #f5f5f5;color: #333;
}
.active {background-color: #42b983;color: white;font-weight: bold;
}
</style>

解析：

通过v-bind:class(可简写为:class)绑定一个字符串变量
点击div时，changeStyle方法会切换styleDyn的值
样式会在'normal'和'active'之间切换

(2) 数组写法

适用场景：要绑定的样式的个数不确定，名字也不确定

<template><div><!-- 绑定class样式--数组写法 --><div class="basic" :class="arr1">{{name}}</div><button @click="addClass">添加样式</button><button @click="removeClass">移除样式</button></div>
</template><script>
export default {data() {return {name: '数组写法示例',arr1: ['style1', 'style2']}},methods: {addClass() {this.arr1.push('style' + (this.arr1.length + 1));},removeClass() {this.arr1.pop();}}
}
</script><style>
.style1 {border-radius: 5px;
}
.style2 {box-shadow: 0 0 5px #999;
}
.style3 {transform: rotate(5deg);
}
.style4 {background: linear-gradient(to right, #ff9966, #ff5e62);
}
</style>

解析：

通过数组可以动态添加/移除多个class
点击按钮可以动态修改数组内容，从而改变应用的样式

(3) 对象写法

适用场景：要绑定的样式的个数确定，名字也确定，但要动态决定是否使用

<template><div><!-- 绑定class样式--对象写法 --><div class="basic" :class="obj">{{name}}</div><button @click="toggleBold">切换加粗</button><button @click="toggleItalic">切换斜体</button></div>
</template><script>
export default {data() {return {name: '对象写法示例',obj: {bold: false,italic: true,underline: true}}},methods: {toggleBold() {this.obj.bold = !this.obj.bold;},toggleItalic() {this.obj.italic = !this.obj.italic;}}
}
</script><style>
.bold {font-weight: bold;
}
.italic {font-style: italic;
}
.underline {text-decoration: underline;
}
</style>

解析：

对象写法的键是class名，值是布尔值，决定是否应用该class
可以通过修改对象的属性值来动态切换样式

2. 内联样式绑定

(1) 对象写法

<template><div><!-- 绑定内联style样式--对象写法 --><div class="basic" :style="styleObj">{{name}}</div><button @click="changeColor">改变颜色</button></div>
</template><script>
export default {data() {return {name: '内联样式对象写法',styleObj: {color: 'blue',fontSize: '20px',backgroundColor: '#f0f0f0'}}},methods: {changeColor() {const colors = ['red', 'green', 'blue', 'orange', 'purple'];this.styleObj.color = colors[Math.floor(Math.random() * colors.length)];}}
}
</script>

解析：

样式属性名需要使用驼峰命名法（如fontSize而不是font-size）
可以动态修改样式对象的属性值来改变元素样式

(2) 数组写法

<template><div><!-- 绑定内联style样式--数组写法 --><div class="basic" :style="styleArr">{{name}}</div></div>
</template><script>
export default {data() {return {name: '内联样式数组写法',styleArr: [{ color: 'red', fontSize: '18px' },{ backgroundColor: '#eee', padding: '10px' }]}}
}
</script>

解析：

数组中可以包含多个样式对象，它们会被合并后应用到元素上
适用于需要组合多个样式对象的场景

二、条件渲染

Vue提供了两种条件渲染的方式：v-if和v-show

1. v-if 系列指令

<template><div><h2>v-if示例</h2><button @click="toggleShow">切换显示</button><p v-if="show">这是v-if控制的内容</p><p v-else-if="show === null">这是v-else-if控制的内容</p><p v-else>这是v-else控制的内容</p><template v-if="loginType === 'username'"><label>用户名</label><input placeholder="请输入用户名" key="username-input"></template><template v-else><label>邮箱</label><input placeholder="请输入邮箱" key="email-input"></template><button @click="toggleLoginType">切换登录方式</button></div>
</template><script>
export default {data() {return {show: true,loginType: 'username'}},methods: {toggleShow() {if (this.show === true) {this.show = null;} else if (this.show === null) {this.show = false;} else {this.show = true;}},toggleLoginType() {this.loginType = this.loginType === 'username' ? 'email' : 'username';}}
}
</script>

特点：

v-if是真正的条件渲染，元素会被完全销毁和重建
v-if是惰性的，初始条件为假时什么也不做，直到条件变为真才会渲染
v-if可以和v-else-if、v-else一起使用，但必须保持结构连续
使用key可以管理可复用的元素，避免Vue高效复用元素带来的问题

2. v-show 指令

<template><div><h2>v-show示例</h2><button @click="toggleVisible">切换显示</button><p v-show="visible">这是v-show控制的内容</p><!-- v-show不支持template语法 --><div v-show="visible"><p>v-show只是简单地切换CSS的display属性</p><p>无论条件如何，元素始终会被渲染并保留在DOM中</p></div></div>
</template><script>
export default {data() {return {visible: true}},methods: {toggleVisible() {this.visible = !this.visible;}}
}
</script>

特点：

v-show只是简单地切换元素的displayCSS属性
无论初始条件如何，元素始终会被渲染并保留在DOM中
v-show不支持<template>元素，也不能和v-else配合使用

3. v-if vs v-show 对比

特性	v-if	v-show
渲染方式	条件为假时不渲染DOM	总是渲染，只是切换display
切换开销	高（销毁/重建）	低（只是CSS切换）
初始渲染开销	低（条件为假时）	高（总是会渲染）
适用场景	切换不频繁	频繁切换
支持语法	支持template和v-else	不支持template

选择建议：

如果需要非常频繁地切换，使用v-show更好
如果在运行时条件很少改变，使用v-if更好
如果涉及权限控制等一次性判断，优先使用v-if

三、综合实战示例

<template><div><h1>Vue样式与条件渲染综合示例</h1><!-- 样式绑定 --><div class="panel" :class="panelClasses"><h2>用户信息</h2><div v-if="userLoggedIn" class="user-info"><p>用户名: {{user.name}}</p><p>会员等级: {{user.level}}</p></div><div v-else class="login-prompt"><p>请先登录查看用户信息</p><button @click="login">登录</button></div></div><!-- 条件渲染 --><div class="control-panel"><button @click="toggleTheme">切换主题</button><button @click="toggleLoginStatus">切换登录状态</button><button @click="toggleWarning">切换警告状态</button></div><!-- 动态样式 --><div :style="warningStyle" v-show="showWarning">警告：这是一条重要提示信息！</div></div>
</template><script>
export default {data() {return {userLoggedIn: false,showWarning: false,darkTheme: false,user: {name: '张三',level: '黄金会员'},warningStyle: {padding: '10px',margin: '10px 0',borderRadius: '4px',color: 'white'}}},computed: {panelClasses() {return {'dark-theme': this.darkTheme,'logged-in': this.userLoggedIn,'warning-active': this.showWarning}}},methods: {login() {this.userLoggedIn = true;this.showWarning = false;},toggleTheme() {this.darkTheme = !this.darkTheme;this.warningStyle.backgroundColor = this.darkTheme ? '#ff7043' : '#f44336';},toggleLoginStatus() {this.userLoggedIn = !this.userLoggedIn;},toggleWarning() {this.showWarning = !this.showWarning;}}
}
</script><style>
.panel {padding: 20px;border: 1px solid #ddd;border-radius: 5px;margin-bottom: 20px;transition: all 0.3s ease;
}.dark-theme {background-color: #333;color: #fff;border-color: #555;
}.logged-in .user-info {background-color: #e8f5e9;padding: 10px;border-radius: 4px;
}.dark-theme.logged-in .user-info {background-color: #1b5e20;
}.login-prompt {text-align: center;padding: 20px;
}.login-prompt button {padding: 5px 15px;background-color: #42b983;color: white;border: none;border-radius: 3px;cursor: pointer;
}.control-panel {margin-bottom: 20px;
}.control-panel button {margin-right: 10px;padding: 5px 10px;cursor: pointer;
}.warning-active {border-left: 4px solid #f44336;
}
</style>

解析：

综合使用了class的对象绑定语法，根据多个条件计算class
使用v-if和v-else实现条件渲染
使用v-show控制警告信息的显示/隐藏
动态修改内联样式
展示了不同场景下样式和条件渲染的应用

通过这个综合示例，我们可以看到Vue的样式绑定和条件渲染如何协同工作，创建出动态、响应式的用户界面。

Vue样式绑定与条件渲染详

一、Vue样式绑定在Vue中，我们可以通过多种方式动态地绑定样式，让界面根据数据状态变化而自动更新样式。 1. class样式绑定 (1) 字符串写法适用场景：样式的类名不确定，需要动态指定 <template><div><!-- 绑定…...

编程日记 2025/7/3 8:12:33

python基于协同过滤的动漫推荐系统

目录技术栈介绍具体实现截图系统设计研究方法：设计步骤设计流程核心代码部分展示研究方法详细视频演示试验方案论文大纲源码获取/详细视频演示技术栈介绍 Django-SpringBoot-php-Node.js-flask 本课题的研究方法和研究步骤基本合理，难度适中&#xf…...

编程日记 2025/6/30 15:19:39

光场操控新突破！3D 光学信息处理迎来通用 PSF 工程时代--《自然》子刊：无需复杂算法，这一技术让 3D 光学成像实现 “即拍即得”念日

导语在光学成像领域，如何突破分辨率与成像速度的瓶颈，一直是科研人员探索的焦点。近日，加州大学洛杉矶分校（UCLA）的研究团队在《Light: Science & Applications》发表论文，提出了一种通用点扩散函数&a…...

编程日记 2025/7/3 8:09:41

ubuntu20.04如何给appImage创建快捷方式 1. 确保AppImage是可执行的 chmod x /path/to/your/appimage2. 创建.desktop文件在~/.local/share/applications/目录下创建一个新的 .desktop 文件： vi ~/.local/share/applications/your-appname.desktop添加以下内容…...

编程日记 2025/7/2 1:40:33

网络安全之SQL RCE漏洞

引言堡垒机（Bastion Host），也称为跳板机或运维安全审计系统，是一种用于管理和控制对内部网络资源访问的安全设备。它的主要作用是作为运维人员访问内部服务器和网络设备的唯一入口，通过集中化的身份认证、权限管理和…...

编程日记 2025/7/2 22:41:01

DeepSeek网页版随机点名器

用DeepSeek帮我们生成了一个基于html5的随机点名器，效果非常棒，如果需要加入名字，请在代码中按照对应的格式添加即可。提示词prompt 帮我生成一个随机点名的HTML5页面生成真实一点的名字数据点击随机按钮开始随机选择要有闪动的效果 &…...

编程日记 2025/7/3 8:08:43

Elasticsearch索引字段的类型

在 Elasticsearch 中，索引字段的类型（即 Mapping 中的字段类型）对搜索和存储性能影响很大。下面是各种常用数据类型的用途及推荐使用场景总结： 1. keyword 类型（精确匹配） 适合数据： 不需要分词…...

编程日记 2025/6/30 15:19:28

大模型在慢性病毒性肝炎预测及诊疗方案制定中的应用研究

目录一、引言 1.1 研究背景与意义 1.2 研究目的与创新点二、慢性病毒性肝炎概述 2.1 疾病定义与分类 2.2 发病机制与病理特征 2.3 流行病学现状三、数据收集与预处理 3.1 数据来源 3.2 数据清洗 3.3 特征工程四、大模型选择与构建 4.1 模型选择依据 4.2 模型…...

编程日记 2025/6/30 15:19:25

DAY 43 复习日

浙大疏锦行https://blog.csdn.net/weixin_45655710 第一步：寻找并准备图像数据集在Kaggle等平台上，你可以找到大量用于图像分类任务的数据集，例如英特尔图像分类数据集 (Intel Image Classification) 或手写数字识别数据集 (Digit Recogni…...

编程日记 2025/6/30 15:19:23

SQL学习笔记3

SQL常用函数 1、字符串函数函数调用的语法：select 函数（参数); 常用的字符串函数有： 拼接字符串，将几个字符串拼到一起：concat (s1,s2,……); select concat(你好,hello); update mytable set wherefo concat(中…...

编程日记 2025/7/2 2:15:25

JVM调优实战 Day 7：JVM线程分析与死锁排查

【JVM调优实战 Day 7】JVM线程分析与死锁排查文章标签 jvm调优, 线程分析, 死锁排查, JVM监控, Java性能优化, JVM参数配置文章简述在Java应用的高并发场景中，线程管理与死锁问题往往是性能瓶颈的根源。本文作为“JVM调优实战”系列的第7天，深入解析…...

编程日记 2025/6/30 15:19:19

Android-Layout Inspector使用手册

Layout Inspector Android Layout Inspector 是 Android Studio 中用于调试应用布局的工具启动方法： 通过下载Layout Inspector插件，在 “View - Tool Windows - Layout Inspector” 或 “Tools - Layout Inspector” 启动。主要界面区域&#xff1a…...

编程日记 2025/7/3 2:15:35

【51单片机5毫秒定时器】2022-6-1

缘由单片机的代码，求大家来帮帮我-编程语言-CSDN问答 #include "REG52.h" unsigned char code smgduan[]{0x3f,0x06,0x5b,0x4f,0x66,0x6d,0x7d,0x07,0x7f,0x6f,0x77,0x7c,0x39,0x5e,0x79,0x71,0,64}; //共阴0~F消隐减号 unsigned char Js0, miao0;//中断…...

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

Flutter 多平台项目开发指南

Flutter 多平台项目开发指南本指南将帮助你从 0 到 1 创建并适配一个支持 Android / iOS / Web / Windows / macOS / Linux 的 Flutter 多平台项目。 ✅ 一、创建支持多平台的 Flutter 项目 flutter create my_multi_platform_app cd my_multi_platform_app默认会生成支持以…...

编程日记 2025/7/3 8:01:04

Mac电脑如何搭建基于java后端的开发的各种工具服务

1. 确认Mac的CPU架构首先，确认您的Mac是使用Intel还是Apple Silicon（如M1芯片）架构： uname -m如果返回x86_64，表示是Intel架构。如果返回arm64，表示是Apple Silicon架构。 2.安装IDEA Download Intelli…...

编程日记 2025/6/30 15:19:12

深入解析前端 Meta 标签：HTML 的隐形守护者与功能大师

在构建现代网页时，我们常常关注炫目的视觉效果、复杂的交互逻辑或强大的框架，却容易忽略那些深藏于 <head> 之中、看似不起眼的 <meta> 标签。这些标签如同网页的隐形守护者，无声地承担着定义文档元数据、指导浏览器行为、优化搜…...

编程日记 2025/6/30 15:19:09

CRON表达式编辑器与定时任务实现技术文档

1. 前端CRON表达式编辑器组件 CronExpressionEditor.vue组件是系统中用于创建和编辑CRON表达式的核心UI组件，它提供了直观的界面来生成复杂的定时任务表达式。 1.1 组件结构与状态管理 // 核心状态变量 const second ref<string>(0); const minute ref&…...

编程日记 2025/7/2 2:50:04

45. 跳跃游戏 II

给定一个长度为 n 的 0 索引整数数组 nums。初始位置为 nums[0]。每个元素 nums[i] 表示从索引 i 向后跳转的最大长度。换句话说，如果你在 nums[i] 处，你可以跳转到任意 nums[i j] 处: 0 < j < nums[i] i j < n 返回到达 nums[n - 1] 的最…...

编程日记 2025/6/30 15:19:04

《解锁AudioSet：开启音频分析的无限可能》

音频新时代的 “密钥”：AudioSet 登场在科技飞速发展的今天，音频作为信息传播与交互的关键媒介，早已渗透到现代科技的各个角落。从智能手机中的语音助手，让我们通过简单的语音指令就能查询信息、发送消息，到智能家居系…...

编程日记 2025/7/1 22:23:21

环境太多？不好管理怎么办？TakMll 工具帮你快速切换和管理多语言、多版本情况下的版本切换。

本篇文章主要介绍一款环境管理工具，即TakMll，通过简单的入口命令 “tkm” 即可快速的管理多种语言下、多种版本的环境切换，诸如快速切换PHP、同时存在java、mave等不同版本。作者：任聪聪日期：2025年6月26日 TakMll 特…...

编程日记 2025/6/30 15:19:00

spring-ai 1.0.0 （1）模型调用能力

听说1.0是一个非常好用的版本，最后还是扛不住听说的压力，为了落实自己悬浮心理，自己还是着手实践一下了。第一步pom集成： 参考spring-projects/spring-ai | DeepWiki维基以及官方文档入门 ：： Spring AI …...

编程日记 2025/6/30 15:18:58

如何在 Manjaro Linux 上启用 AUR 仓库来安装软件包

Manjaro 是基于 Arch 的系统，是了解和学习 Arch Linux 命令的绝佳方式。它自带所有流行的桌面环境界面，无论是 XFCE 还是 Gnome 的爱好者，都可以在 Manjaro 中直接使用。 Manjaro 或 Arch Linux 的默认软件包管理器是 Pacman，我们…...

编程日记 2025/7/3 2:24:41

简单使用python

本文章没有深入探讨python，只说语法格式，合适于有其他编程语言的基础、并想快速使用python的人查看。一、print() 用于打印信息，括号中可以是数学运算表达式或者字符串（或者说是文字）。 print(hello!) 1.1、转义字…...

编程日记 2025/7/2 10:09:07

2025服务端java搭建篇：蜻蜓I即时通讯系统私有化部署深度指南-优雅草卓伊凡|麻子|贝贝

2025服务端java搭建篇：蜻蜓I即时通讯系统私有化部署深度指南-优雅草卓伊凡|麻子|贝贝前言蜻蜓I即时通讯系统是一款不依赖第三方服务的私有化即时通讯解决方案，本指南将详细介绍如何使用宝塔面板在CentOS系统上完成系统的完整部署。私有化部署意味着您…...

编程日记 2025/7/3 2:09:26

用Streamlit开发第一个Python应用程序

用Streamlit开发第一个Python应用程序 Using Streamlit to Develop the First Application in Python By JacksonML 1.Streamlit简介 Streamlit是个新出世的、功能强大的Python第三方库，将为基于Web的Python应用程序大放异彩。 Streamlit官网主页面如下&#x…...

编程日记 2025/6/29 22:51:28

IDEA + Spring Boot + javadoc 实例应用

1、添加 javadoc 插件依赖 pom.xml <build><plugins><plugin><groupId>org.apache.maven.plugins</groupId><artifactId>maven-javadoc-plugin</artifactId><version>3.6.3</version><…...

编程日记 2025/7/1 18:30:38

【机器学习深度学习】交互式线性回归 demo

目录一、环境准备二、Demo 功能三、完整交互 demo 代码 3.1 执行代码 3.2 示例交互演示 3.3 运行结果 3.4 运行线性图使用 PyTorch 构建交互式线性回归模型：输入数据、拟合直线、图像可视化并实现实时预测，助你深入理解机器学习从数据到模型的…...

编程日记 2025/7/2 23:12:34

新手向:Anaconda3的安装与使用方法

我们在刚开始接触Python时使用的是Python的直接编译器,如果我们需要进行其他的项目编写往往需要使用另一个版本的Python ,这样反复的下载很是麻烦并且还会造成系统变量的紊乱.这次我们引入Anaconda3,可创建虚拟的Python环境,满足不同项目的需要,当不用的时候可以直接放心删除不…...

编程日记 2025/7/3 3:07:00

详解零拷贝

目录一、用户态（User Mode）和内核态（Kernel Mode） 1.1 用户态 (User Mode)： 1.2 内核态 (Kernel Mode)： 1.3 关键交互：系统调用 (System Call) 二、为什么需要区分用户态和内核态&#x…...

编程日记 2025/7/2 4:39:47

微服务常用的基础知识

1.微服务介绍 1.1 产生背景随着互联网的发展，网站应用的规模不断扩大，传统单体架构逐渐难以应对大型网站高并发、高扩展性等需求，于是分布式系统架构应运而生。Spring Cloud 就是在这种背景下诞生的，它利用 Spring Boot 的开发便…...

编程日记 2025/7/3 3:26:05

【开源工具】Windows一键配置防火墙阻止策略（禁止应用联网）| 附完整Python源码

🛡️【开源工具】Windows一键配置防火墙阻止策略（禁止应用联网）| 附完整源码 🌈 个人主页：创客白泽 - CSDN博客 🔥 系列专栏：🐍《Python开源项目实战》 💡 热爱不止于代码，热情源自每一个灵感闪现的夜晚。愿以开源之火，点亮前行之路。 🐋 希望大家多多支持，…...

编程日记 2025/7/2 3:59:38

6月份最新代发考试战报：思科华为HCIP HCSE 考试通过

6月份最新代发考试战报：思科华为HCIP HCSE 考试通过 H19-423 HCSA-Presales-IP Network 数通考试通过， H12-725 HCIP-Security安全考试通过，H13-121 HCIP-Kunpeng Application Developer鲲鹏计算考试通过，CCNP 350-401考试通过…...

编程日记 2025/7/2 4:35:15

本地部署开源时间跟踪工具 Kimai 并实现外部访问（ Windows 版本）

Kimai 是一款开源的时间跟踪工具，它易于使用，并提供了强大的报告功能，在个人和团队记录工作时间、项目时间和活动时间等之后可以帮助用户了解他们是如何花费时间的，从而提高生产力和效率。本文将详细介绍如何在 Windows 系统本地部…...

编程日记 2025/6/30 13:53:35

SpringBoot 中 @Transactional 的使用

SpringBoot 中 Transactional 的使用一、Transactional 的基本使用二、Transactional 的核心属性三、使用避坑（失效场景）3.1 自调用问题3.2 异常处理不当3.3 类未被 Spring 管理3.4 异步方法内使用失效四、工作实践4.1 事务提交之后执行一些操作4.2 事…...

编程日记 2025/7/3 3:15:52

Mac电脑安装iTerm2通过rz命令上传文件到远程服务器

背景闲着没事买了个云服务器玩（京东云轻量云主机），Mac本地搞了个java的jar包，想上传到云服务器，通过scp命令在Mac自带的【终端】上怎么都上传不了，如图。但是通过ssh命令（ssh root主机IP &…...

编程日记 2025/7/2 19:33:13

供应链数据可视化大屏

在全球化与数字化转型的双重浪潮下，供应链管理正面临前所未有的挑战：黑天鹅事件频发、多环节协同效率低下、库存与成本难以平衡……如何让供应链更透明、更敏捷、更具韧性？供应链数据可视化大屏应运而生，成为企业破解管理痛点的关…...

编程日记 2025/7/1 4:04:25

A2O MAY登上央视《中国音乐TOP榜》舞台，展现新歌榜冠军实力

——A2O MAY凭借新歌《BOSS》登上中国QQ音乐新歌榜冠军后，成功出演CCTV音乐节目《中国音乐TOP榜》，以实力赢得瞩目。由A2O Entertainment（以下简称A2O）推出的全球女团 A2O MAY（成员包括朱晨予CHENYU、李诗洁SHIJIE、…...

编程日记 2025/7/2 9:51:25

关于如何在 Git 中切换到之前创建的分支的方法

文章目录关于如何在 Git 中切换到之前创建的分支的方法一、确保你在项目目录中二、查看所有分支（可选）三、切换到目标分支四、如果分支仅在远程存在五、验证是否切换成功六、常见问题处理七、总结命令流程 PS:下次进入分支时，只需完成步骤1 …...

编程日记 2025/7/3 8:09:41

vue3+element-plus 组件功能实现上传功能

一、整体功能概述这段代码实现了一个基于 Vue 3 和 Element Plus 组件库的文件导入及预览功能模块。主要包含了一个主导入对话框（用于上传文件、展示文件相关信息、进行导入操作等）以及一个用于预览文件内容的预览对话框。支持导入特定格式（…...

编程日记 2025/7/3 8:01:03

多相机人脸扫描设备如何助力高效打造数字教育孪生体?

在教育数字化转型浪潮中，数字孪生体作为现实教育场景的虚拟映射，正成为智慧教育发展的关键技术支点。传统教育模式面临师资资源分布不均、个性化教学难以覆盖、跨时空教学场景受限等痛点，而数字孪生体通过构建高仿真虚拟教育主体（…...

编程日记 2025/7/2 2:59:28

高中成绩可视化平台开发笔记

高中成绩可视化平台（1） 一、项目概述本系统是一个基于 PyQt5 和 Matplotlib 的高中成绩数据可视化分析平台，旨在帮助教师快速了解学生成绩分布、班级对比、学科表现等关键指标。平台支持文科与理科的数据切换，并提供多个维度的图…...

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

圆周期性显示和消失——瞬态实现（CAD c#二次开发、插件定制）

using System; using System.Collections.Generic; using System.Linq; using System.Text; using System.Threading; using System.Threading.Tasks; using System.Timers; [assembly: CommandClass(typeof(IfoxDemo.Commands))] namespace IfoxDemo {// 新增的圆形闪烁命令实…...

编程日记 2025/7/2 3:25:53

Spark SQL to_json 函数介绍

目录前言函数介绍参数说明示例前言在Apache Hive中，并没有内置的to_json函数。在Apache Spark SQL中确实有to_json函数,它可以用来将结构化数据（如结构化类型或MAP类型）转换为JSON字符串。这个功能对于需要将表格数据输出为JSON格式的场景…...

编程日记 2025/6/29 22:48:57

5个免费的硬盘分区工具，操作简单功能全

电脑用久了，系统盘空间告急、数据盘混乱无序，很多人想重新分区，却又担心太复杂或怕搞坏硬盘。其实，只要用对工具，分区操作其实一点都不难。更重要的是，有很多免费的分区软件，不仅好用&#xff0…...

编程日记 2025/6/29 22:48:52

uniapp事件onLoad区分大小写

区分大小写。不然会不起作用。onLoad方法中的功能均不会被执行。除了功能逻辑要检查外。大小写是要认真检查的一部分...

编程日记 2025/6/30 13:53:14

Flutter Riverpod 使用详细解析

📚 Flutter 状态管理系列文章目录 Flutter 状态管理(setState、InheritedWidget、 Provider 、Riverpod、 BLoC / Cubit、 GetX 、MobX 、Redux) setState() 使用详解：原理及注意事项 InheritedWidget 组件使用及原理 Flutter 中 Provider 的使用、注…...

编程日记 2025/7/1 18:30:34

算法打卡 day4

4 . 高精度算法性质：数组或者容器从低位往高位依次存储大整数，方便进位。 4.1 高精度加法给定两个正整数（不含前导 0），计算它们的和。输入格式共两行，每行包含一个整数。输出格式共一行，…...

编程日记 2025/7/1 18:30:32

权威认证！华宇TAS应用中间件荣获CCRC“中间件产品安全认证”

近日，华宇TAS应用中间件顺利通过了中国网络安全审查认证和市场监管大数据中心(CCRC)的信息安全认证，获得了IT产品信息安全认证证书。此次获证，标志着华宇TAS应用中间件在安全性、可靠性及合规性等方面达到行业领先水平，可以为政企…...

编程日记 2025/7/3 8:07:54

【Linux网络编程】多路转接IO（二）epoll

目录 epoll初识 epoll的相关系统调用 epoll的工作原理 epoll的优点 epoll的工作方式水平触发 Level Triggered 工作模式边缘触发 Edge Triggered 工作模式对比LT和ET 理解 ET 模式和非阻塞文件描述符 epoll的惊群问题基于LT模式的epoll代码样例 epoll初识按照man…...

编程日记 2025/7/3 8:09:42

flutter的包管理#资源管理#调试Flutter应用#Flutter异常捕获

2.5 包管理 2.5.1 简介在软件开发中，很多时候有一些公共的库或 SDK 可能会被很多项目用到，因此，将这些代码单独抽到一个独立模块，然后哪个项目需要使用时再直接集成这个模块，便可大大提高开发效率。很多编程语言或开…...

编程日记 2025/7/1 18:30:26

一、Vue样式绑定

1. class样式绑定

(1) 字符串写法

(2) 数组写法

(3) 对象写法

2. 内联样式绑定

(1) 对象写法

(2) 数组写法

二、条件渲染

1. v-if 系列指令

2. v-show 指令

3. v-if vs v-show 对比

三、综合实战示例

相关文章：