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

20250417-vue-条件插槽

news 来源：原创 2025/8/20 18:34:45

有时候我们需要根据内容是否被传入了插槽来渲染某些内容。

你可以结合使用 $slot 属性与 v-if 来实现。

在下面的示例中，我们定义了一个卡片组件，它拥有三个条件插槽：header、footer 和 default。当 header、footer 或 default 的内容存在时，我们希望包装它以提供额外的样式：

子组件代码

<template><div class="card"><div v-if="$slots.header" class="card-header"><slot name="header" /></div><div v-if="$slots.default" class="card-content"><slot /></div><div v-if="$slots.footer" class="card-footer"><slot name="footer" /></div></div>
</template><style>.card {border: 1px solid black;padding: 0;}.card-header {background-color: skyblue;padding: 4px;}.card-content {padding: 4px;}.card-footer {background-color: lightgray;padding: 4px;}</style>

父组件代码

<template><Card><template #header><h1>标题</h1></template><template #default><p>内容</p></template><template #footer><em>底部</em></template></Card>
</template><script setup>import Card from './Card.vue'
</script>

20250417-vue-条件插槽

有时候我们需要根据内容是否被传入了插槽来渲染某些内容。你可以结合使用 $slot 属性与 v-if 来实现。在下面的示例中，我们定义了一个卡片组件，它拥有三个条件插槽：header、footer 和 default。当 header、footer 或 default 的内容存在时…...

编程日记 2025/8/20 18:34:45

【Unity】UI点击事件处理器

目录前言脚本前言在开发过程中，经常需要监听UI的点击事件，这里我给大家整理一下，脚本直接挂在需要监听的节点上即可。脚本 using UnityEngine; using UnityEngine.Events; using UnityEngine.EventSystems;namespace GameLogic {/// &…...

编程日记 2025/8/17 19:50:55

阿里云服务器的docker环境安装nacos--实践

阿里云服务器的docker环境安装nacos–实践前提先安装mysql数据库，mysql中创建nacos所需的表以下为阿里云服务器docker环境安装，需在安全组开放8848端口 1. 拉取nacos-server镜像 //最新版本nacos docker pull nacos/nacos-server//或者指定nacos版本…...

编程日记 2025/8/17 18:20:20

每日算法-链表(23.合并k个升序链表、25.k个一组翻转链表)

一.合并k个升序链表 1.1题目描述 1.2题解思路解法一：小根堆我们可以先定义一个小根堆，将k个指针的头结点如堆，每次取堆顶元素尾插到newhead中，然后再pop()，接着push堆顶原来堆顶元素的下一个节点重点分析&#…...

编程日记 2025/8/17 18:20:37

数据结构——反射、枚举以及lambda表达式

1. 反射 Java的反射（reflection）机制是在运⾏时检查、访问和修改类、接⼝、字段和⽅法的机制；这种动态获取信息以及动态调⽤对象⽅法的功能称为java语⾔的反射（reflection）机制。用途 1. 框架开发 2. 注解处理 3.…...

编程日记 2025/8/17 21:12:38

深入理解 HTML5 Web SQL 数据库：用法、现状与替代方案

一、引言在 Web 开发的领域中，客户端存储一直是一个关键的话题。HTML5 带来了多种客户端存储的解决方案，其中 Web SQL 数据库曾经是一个备受关注的选项。尽管如今它已被废弃，但了解其原理、使用方法以及为何被替代，对于 Web 开发者来说仍然具有重要的意义。本文将深入探讨…...

编程日记 2025/8/17 12:07:09

系统架构设计（一）：UML与软件架构

什么是系统架构设计？ 系统架构设计是对系统高层结构和行为的描述，包括： 系统的各个模块（组件）模块之间的交互方式数据流动、控制流动技术选型与部署策略系统架构常见的风格有： 分层架构（La…...

编程日记 2025/8/17 18:20:32

极狐GitLab 外部流水线验证功能解读

极狐GitLab 是 GitLab 在中国的发行版，关于中文参考文档和资料有： 极狐GitLab 中文文档极狐GitLab 中文论坛极狐GitLab 官网外部流水线验证 (BASIC SELF) 您可以使用外部服务在创建流水线之前进行验证。极狐GitLab 发送一个 POST 请求到外部服务的…...

编程日记 2025/8/17 20:49:08

MCP和A2A是什么？

MCP和A2A是什么？ MCP（Model-Connect Protocol）和A2A（Agent-to-Agent）协议逐渐成为行业关注的焦点。这两个协议分别由Anthropic和谷歌推出，旨在提升智能体与外部工具、数据源及API资源的连接效率&#xff0c…...

编程日记 2025/8/17 18:20:35

CNN卷积神经网络

一、什么是卷积神经网络（CNN） CNN（卷积神经网络）是一种专门用于处理图像的神经网络，尤其在图像识别任务中表现出色，例如识别手写数字。它通过多层结构逐步提取图像特征，最终输出识别结果。与传…...

编程日记 2025/8/17 21:19:30

生物信息学技能树（Bioinformatics）与学习路径

李升伟整理生物信息学是一门跨学科领域，涉及生物学、计算机科学以及统计学等多个方面。以下是关于生物信息学的学习路径及相关技能的详细介绍。一、基础理论知识 1. 生物学基础知识需要掌握分子生物学、遗传学、细胞生物学等相关概念。对基因组结构、蛋白质…...

编程日记 2025/8/17 20:35:22

Obsidian无门槛简明教程

Obsidian简明教程 Markdown基本语法基本码字标题换行段落引用分割线代码块链接带名字的链接超链接插入图片强调语法加粗斜体删除线高亮列表有序列表无序列表任务列表 Obsidian核心用法软件基本使用安装仓库文件夹笔记编辑与查看资源核心插件双链标签三方插件Various Compl…...

编程日记 2025/8/17 20:02:55

常用 Git 命令详解

Git 是一个强大的版本控制工具，广泛用于软件开发和团队协作中。掌握 Git 命令可以帮助开发者更高效地管理代码版本和项目进度。本文将介绍一些常用的 Git 命令，并提供示例以帮助你更好地理解和应用这些命令。目录常用命令 git clonegit stashgit pul…...

编程日记 2025/8/17 18:20:44

【HDFS入门】HDFS与Hadoop生态的深度集成：与YARN、MapReduce和Hive的协同工作原理

目录引言 1 HDFS核心架构回顾 2 HDFS与YARN的集成 3 HDFS与MapReduce的协同 4 HDFS与Hive的集成 4.1 Hive架构与HDFS交互 4.2 Hive数据组织 4.3 Hive查询执行流程 5 HDFS在生态系统中的核心作用 6 性能优化实践 7 总结引言在大数据领域，Hadoop生态系统…...

编程日记 2025/8/17 18:20:38

多路由器通过三层交换机互相通讯（单臂路由+静态路由+默认路由版），通过三层交换机让pc端相互通讯

多路由器通过三层交换机互相通讯（单臂路由静态路由默认路由版） 先实现各个小框框里能够互通哇咔交换机1（二层交换机,可看配置单臂路由的文章) Switch>en Switch#conf t Switch(config)#int f0/1 Switch(config-if)#switchport access…...

编程日记 2025/8/19 2:03:58

电控---CMSIS概览

1. CMSIS库简介 CMSIS（Cortex Microcontroller Software Interface Standard，Cortex微控制器软件接口标准）是由ARM公司开发的一套标准化软件接口，旨在为基于ARM Cortex-M系列处理器（如Cortex-M0/M0/M3/M4/M7/M33等&am…...

编程日记 2025/8/17 20:42:14

2025.04.17【Stacked area】| 生信数据可视化：堆叠区域图深度解析

文章目录生信数据可视化：堆叠区域图深度解析堆叠面积图简介为什么使用堆叠面积图如何使用R语言创建堆叠面积图安装和加载ggplot2包创建堆叠面积图的基本步骤示例代码解读堆叠面积图堆叠面积图的局限性实际应用案例示例：基因表达量随时间变化结论生信…...

编程日记 2025/8/17 18:20:47

XSS之同源、跨域、内容安全策略

一、什么是同源策略 HTML的同源策略是浏览器的一个重要的安全机制，它用于限制一个源的网页如何与另一个源的资源进行交互，以此来减少夸站脚本攻击(XSS)和跨站请求伪造(CSRF)等安全风险。同源的定义若两个URL的协议（protocol）、…...

编程日记 2025/8/19 18:34:54

十三、系统设计

一、前言二、架构设计概念三、架构风格四、面向服务的架构五、微服务六、MDA 七、软件界面设计八、软件设计的构成九、结构化设计十、面向对象设计内容提要十一、面向对象设计原则十二、架构模式、设计模式与惯用法...

编程日记 2025/8/17 20:17:16

HTTP 2.0 协议特性详解

1. 使用二进制协议，简化传输的复杂性，提高了效率 2. 支持一个 TCP 链接发起多请求，移除 pipeline HTTP/2 移除了 HTTP/1.1中的管道化（pipeline）机制，转而采用多路复用（Multiplexing&#xff0…...

编程日记 2025/8/19 13:16:31

MySQL数据备份

一，为什么要进行数据备份备份：能够防止由于机械故障以及人为误操作带来的数据丢失，例如将数据库文件保存在了其它地方。冗余： 数据有多份冗余，但不等备份，只能防止机械故障带来的数据丢失，例如…...

编程日记 2025/8/19 10:51:52

【Ai】CherryStudio 详细使用：本地知识库、MCP服务器

一、CherryStudio 介绍 Cherry Studio 是一款集多模型对话、知识库管理、AI 绘画、翻译等功能于一体的全能 AI 助手平台。 Cherry Studio 高度自定义的设计、强大的扩展能力和友好的用户体验，使其成为专业用户和 AI 爱好者的理想选择。无论是零基础用户还是开发者&…...

编程日记 2025/8/17 7:15:45

STM32F103_HAL库+寄存器学习笔记17 - CAN中断接收 + 接收CAN总线所有报文

导言如上所示，本实验的目的是使能CAN接收FIFO1的挂号中断，使用CAN过滤器0与CAN接收FIFO1的组合，接收CAN总线上所有的CAN报文。如上所示，STM32F103有两个3级深度的接收FIFO。外设CAN想要正常接收CAN报文，必须配置接收…...

编程日记 2025/8/17 5:31:39

kafka报错：The Cluster ID doesn‘t match stored clusterId Some in meta.properties

kafka启动报错： ERROR Fatal error during KafkaServer startup. Prepare to shutdown (kafka.server.KafkaServer) kafka.common.InconsistentClusterIdException: The Cluster ID kVSgfurUQFGGpHMTBqBPiw doesnt match stored clusterId Some(0Qftv9yBTAmf2iDPSl…...

编程日记 2025/8/19 1:19:40

QML 信号与槽

QML 信号与槽 QML 是 Qt 框架中用于构建现代化、流畅用户界面的声明式语言，其信号与槽（Signals and Slots）机制是实现组件间通信和交互的核心特性。与 C 的信号与槽类似，QML 的信号与槽提供了一种松耦合的方式，允许界…...

编程日记 2025/8/17 20:40:12

数据结构-栈

大家好，今天带来的是关于数据结构初阶中的栈和队列的内容，一起来看看吧！！！ 1.栈的概念栈：一种特殊的线性表，其只允许在固定的一端进行插入和删除元素操作。进行数据插入和删除操作的一端称为…...

编程日记 2025/8/17 21:41:29

Java 开发玩转 MCP：从 Claude 自动化到 Spring AI Alibaba 生态整合

摘要本文以原理与示例结合的形式讲解 Java 开发者如何基于 Spring AI Alibaba 框架玩转 MCP，主要包含以下内容。 1. 一些 MCP 基础与快速体验（熟悉的读者可以跳过此部分） 2. 如何将自己开发的 Spring 应用发布为 MCP Server，验…...

编程日记 2025/8/17 21:41:36

CSS核心笔记001

目录杂七杂八知识点样式优先级风格基本选择器通配符元素类ID 复合选择器交集选择器并集后代-孙子儿子兄弟属性各种属性选择器的应用伪类动态伪类结构伪类否定伪类目标为类语言伪类UI伪类伪元素杂七杂八知识点样式优先级行内 > 内部 > 外部风格紧凑风格基本选择…...

编程日记 2025/8/19 14:06:10

Windows快速切换屏幕/桌面

windows自带的切屏需要winctrl 小键盘左右键但是！ Windows使用还是键盘加鼠标舒服！ 教程安装autohotkey 代码 ~LWin & LButton::{SendInput "^#{Left}" ; 发送 Win Ctrl Left (切换到左侧虚拟桌面) } ; 使用花括号包裹命令&a…...

编程日记 2025/8/19 15:23:15

ESP32- 开发笔记- 硬件设计-ESP32-C3基本电路

ESP32的最小电路 1 ESP32固件下载 ESP32 有多种下载（烧录）固件的方式，具体选择取决于开发环境和硬件连接。以下是常见的几种下载方式： 1.1 USB 串口下载（最常用）适用场景：通过 USB 转串口芯片（如 CP2102、CH340）连接电脑，使用 esptool 或其他工具烧录固件。这里…...

编程日记 2025/8/19 11:50:12

webgl入门实例-09索引缓冲区示例

实现效果实现代码 <!doctype html> <html lang"en"><head><meta charset"utf-8" /><meta http-equiv"X-UA-Compatible" content"IEedge" /><meta name"viewport"content"widthdevi…...

编程日记 2025/8/17 18:20:31

STM32 串口中断接收方式笔记：HAL_UART_Receive_IT vs __HAL_UART_ENABLE_IT

📘 STM32 串口中断接收方式笔记：HAL_UART_Receive_IT vs __HAL_UART_ENABLE_IT 🧠 1. 两者作用简述函数/宏作用是否配置HAL状态是否调用Rx回调HAL_UART_Receive_IT()启动一次基于中断的串口接收任务✅ 是✅ 是__HAL_UART_ENABLE_IT()手动使…...

编程日记 2025/8/20 15:27:50

ubuntu 向右拖动窗口后消失了、找不到了

这是目前单显示器的设置，因为实际只有1个显示器，之前的设置如下图所示，有2个显示器，一个主显示器，一个23寸的显示器 ubuntu 22.04 系统今天在操作窗口时，向右一滑，发现这个窗口再也不显示了、找…...

编程日记 2025/8/17 21:01:51

Selenium 获取 Web 页面信息的全指南

Selenium 获取 Web 页面信息的全指南 Selenium 是一个功能强大的自动化测试工具，但它也可以用于 web 页面信息的抓取和分析。本文将详细介绍如何使用 Selenium 来获取网页信息，并涵盖从环境搭建到高级技巧的各个方面。目录简介环境搭建Selenium 的基…...

编程日记 2025/8/17 21:33:32

stm32-lm75、SPI

一、lm75--温度传感器 LM75 是一种数字温度传感器和带有 2 线接口的热监视器（热看门狗），以下是其详细介绍： 一、核心功能与特点温度检测与转换内置带隙温度传感器和 Sigma-Delta 模数转换器，可实现 -55℃ 至 125℃ 温…...

编程日记 2025/8/17 20:50:19

介绍 Docker 的基本概念和优势，以及在应用程序开发中的实际应用。

Docker 是一种开源的容器化平台，可以帮助开发人员打包、部署和运行应用程序。Docker 的基本概念是利用容器来封装应用程序及其所有依赖项，使其能够在任何环境中快速、可靠地运行。 Docker 的优势包括： 轻量级和灵活性：Docker 容…...

编程日记 2025/8/18 1:19:09

如何判断单片机性能极限？

目录 1、CPU 负载 2、内存使用情况 3、实时性能 4、外设带宽 5、功耗与温度在嵌入式系统设计中，当系统变得复杂、功能增加时，单片机可能会逐渐逼近其性能极限。及时识别这些极限点对于保证产品质量、稳定性和用户体验至关重要。当你的嵌入式系统…...

编程日记 2025/8/17 21:40:37

LeetCode 2919 使数组变美的最小增量运算数

动态规划解题：最小操作次数使数组变为美丽数组问题描述给定一个下标从0开始、长度为n的整数数组nums和一个整数k。你可以对数组中的任意一个元素进行加1操作，操作次数不限。如果数组中任意长度大于或等于3的子数组的最大值都大于或等于k，…...

编程日记 2025/8/18 1:09:55

5.VTK 相机

文章目录概念示例概念在VTK（VisualizationToolkit）中，相机（vtkCamera）用于定义场景的观察视角。以下是关于VTK相机的主要概念和设置方法的总结： 相机位置：通过vtkCamera::SetPosition()方法设…...

编程日记 2025/8/18 1:05:00

基于Flask的网络安全渗透知识库系统架构解析

基于Flask的网络安全渗透知识库系统架构解析一、系统架构概述本系统采用经典的三层Flask架构设计，通过模块化的方式实现渗透技术知识库的展示与管理。整体架构包含以下核心组件： 路由控制层：app.py作为入口文件模板展示层：Ji…...

编程日记 2025/8/17 5:44:27

Flutter BigInt 是用于处理任意精度整数的特殊数字类型，专为解决超大整数运算需求而设计

在Flutter/Dart中，BigInt 是用于处理任意精度整数的特殊数字类型，专为解决超大整数运算需求而设计。以下是从原理到实践的全面解析： 一、核心特性特性说明任意精度突破普通int的64位限制（-2^63 ~ 2^63-1）&#xff0c…...

编程日记 2025/8/18 1:09:10

绿幕抠图直播软件-蓝松抠图插件--使用相机直播，灯光需要怎么打？

使用SONY相机进行绿幕抠图直播时，灯光布置是关键，直接影响抠图效果和直播画质。以下是详细的灯光方案和注意事项： 一、绿幕灯光布置核心原则均匀照明：绿幕表面光线需均匀，避免阴影和反光（亮度差控制在0.5…...

编程日记 2025/8/17 21:42:29

DeepSeek在数据仓库的10大应用场景

一、智能数据集成与清洗多源数据整合：DeepSeek能够从多种数据源中提取、转换和加载数据，实现跨系统数据的高效整合。数据清洗与标准化：通过智能算法自动识别并纠正数据中的错误、不一致性和缺失值，提升数据质量。二、数据仓…...

编程日记 2025/8/19 2:46:46

Java 工厂设计模式详解：用统一入口打造灵活可扩展的登录系统----掌握 Spring 源码的基础第一步

一、前言在实际开发中，我们经常面临以下场景： 系统支持多种登录方式（用户名密码、管理员登录、OAuth 登录、短信登录等） 每种登录方式的认证逻辑不同我们希望对外提供一个统一的接口调用，而不暴露具体实现这个…...

编程日记 2025/8/18 1:10:30

算法备案和大模型备案能否同时申请？

最近收到很多小伙伴咨询说“算法备案和大模型备案能不能同时申请？”也有一些小伙伴们还分不清算法备案和大模型备案的区别，纷纷询问做了大模型备案还需要做算法备案吗？今天一篇文章带大家了解一下，算法备案和大模型备案究竟是怎么…...

编程日记 2025/8/18 1:04:49

【2025“华中杯”大学生数学建模挑战赛】C题：就业状态分析与预测详细解题思路

目录 2025“华中杯”大学生数学建模挑战赛C题详细解题思路一、问题一1.1 问题分析1.2 数学模型 1.3 Python代码1.4 Matlab代码二、问题二2.1 问题分析2.2 数学模型 2.3 Python代码2.4 Matlab代码三、问题三3.1 问题分析四、问题四4.1 问题分析与数学模型 2025“华中杯”大学…...

编程日记 2025/8/19 9:31:26

纷析云开源财务软件：助力企业财务管理数字化转型

在当今数字化时代，企业对财务管理工具的需求日益增长，而开源软件以其透明性、灵活性和成本优势成为越来越多企业的选择。纷析云开源财务软件作为一款专注于企业财务数字化的开源解决方案，不仅提供了强大的功能支持，还通过开源生态…...

编程日记 2025/8/19 16:02:13

APang网联科技项目报告（服务器域管理篇）

APang网联科技：连接未来，智能领航公司简介 APang网联科技成立于 [2005年]，总部位于 [广东深圳]，是一家集网络技术研发、系统集成、项目实施与运维服务为一体的高新技术企业。我们致力于为客户提供全方位、定制化的网络部署解决…...

编程日记 2025/8/19 15:44:54

制作Unoconv项目的Docker镜像

制作Unoconv项目的Docker镜像 1 介绍 1.1 Unoconv 在Linux下将Office转换为pdf的很多包仅支持Windows，Unoconv是一个用LibreOffice转化文档的项目，已经归档（2025-3-31）。迁移后的新版本是unoserver，unoserver不太好…...

编程日记 2025/8/17 20:28:38

神经网络--拓扑排序+思维

1.c<0的点赋0，不然会影响后面的入度 2.最后输出层是出度为0的，且题干要求输出c大于0的 3.有q0的情况，所以输的事后就会有答案 https://www.luogu.com.cn/problem/P1038 #include<bits/stdc.h> #include<string> using nam…...

编程日记 2025/8/17 20:12:16

相关文章：