vue3 笔记-插槽
结构类似的模块,我们可以考虑用插槽,以便后续复用:
代码:
1.插槽
<script setup>
defineProps({title: {required: true,type: String},number: {required: true,type: Number}
})
</script><template><div class="px-5 py-4 rounded-lg bg-sky-400 h-fit hover:shadow-2xl transition ease-in-out duration-300"><slot name="header"><h2 class="text-white text-base mb-2">{{ title }}</h2></slot><hr class="border-gray-300 -mx-5"/><div class="pt-3 flex items-center justify-between"><slot name="number"><h2 class="font-bold text-white text-2xl hover:text-purple-600 transition ease-in-out duration-300">{{ number }}</h2></slot><span class="text-white hover:text-purple-600 transition ease-in-out duration-300"><slot name="icon"></slot></span></div></div>
</template>
2.使用插槽
<script setup>
import CardComponent from "@/components/CardComponent.vue";
</script><template><div class="flex gap-4 bg-gray-200 h-screen"><CardComponent title="文章总数" number="233" class="flex-1"><template #icon><svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke-width="2" stroke="currentColor" class="w-6 h-6"><path stroke-linecap="round" stroke-linejoin="round" d="M5 13l4 4L19 7" /></svg></template></CardComponent><CardComponent title="文章分类总数" number="23" class="flex-1"><template #icon><svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke-width="2" stroke="currentColor" class="w-6 h-6"><path stroke-linecap="round" stroke-linejoin="round" d="M5 13l4 4L19 7" /></svg></template></CardComponent><CardComponent title="标签总数" number="255" class="flex-1"><template #icon><svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke-width="2" stroke="currentColor" class="w-6 h-6"><path stroke-linecap="round" stroke-linejoin="round" d="M5 13l4 4L19 7" /></svg></template></CardComponent><CardComponent title="访问量" number="033" class="flex-1"><template #icon><svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke-width="2" stroke="currentColor" class="w-6 h-6"><path stroke-linecap="round" stroke-linejoin="round" d="M5 13l4 4L19 7" /></svg></template></CardComponent><CardComponent title="评论总数" number="987" class="flex-1"><template #icon><svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke-width="2" stroke="currentColor" class="w-6 h-6"><path stroke-linecap="round" stroke-linejoin="round" d="M5 13l4 4L19 7" /></svg></template></CardComponent></div>
</template>
相关文章:
vue3 笔记-插槽
结构类似的模块,我们可以考虑用插槽,以便后续复用: 代码: 1.插槽 <script setup> defineProps({title: {required: true,type: String},number: {required: true,type: Number} }) </script><template><d…...
C# 字符串常用方法
文章目录 Length:获取字符串中字符的个数(不包括末尾的空字符)ToLower() 和 ToUpper():将字符串转换为小写或大写形式Substring(int startIndex, int length):从指定索引开始截取指定长度的子字符串Remove(int startIn…...
字节跳动青训营——入营考核解答(持续更新中~~~)
考核内容: 在指定的题库中自主选择不少于 15 道算法题并完成解题,其中题目难度分配如下: 简单题不少于 10 道中等题不少于 4 道困难题不少于 1 道 解答代码 8.进制求和转换(难) 代码实现: import jav…...
JavaWeb合集15-Apache POI
十五、Apache POI Apache POI是一个处理Miscrosoft Office各种文件格式的开源项目。简单来说就是,我们可以使用POI在Java 序中对Miscrosoft Office各种文件进行读写操作。一般情况下,POI都是用于操作Excel文件。 使用场景:银行网银系统导出交…...
Threejs 实现3D 地图(01)创建基本场景
"d3": "^7.9.0", "three": "^0.169.0", "vue": "^3.5.10" <script setup> import { onMounted,ref } from vue import * as THREE from three import * as d3 from "d3"; //莫开托坐标 矫正地图…...
snmpdelta使用说明
1.snmpdelta介绍 snmpdelta命令是用来获取下一个节点的OID的值。 2.snmpdelta安装 1.snmpdelta安装 命令: yum -y install net-snmp net-snmp-utils [root@logstash ~]# yum -y install net-snmp net-snmp-utils Loaded plugins: fastestmirror Loading mirror speeds f…...
Hadoop集群安装
集群规划 node01node02node03角色主节点从节点从节点NameNode√DataNode√√√ResourceManager√NodeManager√√√SecondaryNameNode√Historyserver√ 上传安装包到node01 解压到指定目录 tar -zxvf /bigdata/soft/hadoop-3.3.3.tar.gz -C /bigdata/server/ 创建软链接 cd…...
VuePress集成到Vue项目的方法
VuePress 可以作为一个独立的静态站点生成器来使用,也可以集成到现有的 Vue 项目中。以下是将 VuePress 集成到 Vue 项目的几种方法: 1. 作为本地依赖集成 如果你想在现有的 Vue 项目中使用 VuePress 来管理文档,你可以将 VuePress 安装为本…...
【ROS】ROS局域网下多机通讯方法
最近工作中需要用到多机通讯,这里稍微总结一下使用方法。 目录 一、网络配置 二、修改两个设备的hosts文件 三、修改两个ros设备的.bashrc 四、launch文件中给节点设定运行的设备 一、网络配置 首先确保两个ros设备连接到同一局域网下,然后查询两个…...
linux 系统怎么使用
Linux系统的使用涉及多个方面,包括文件管理、目录操作、用户管理、进程管理、网络配置等。以下是对Linux系统基础使用的详细介绍: 一、文件管理 查看文件和目录 ls:列出当前目录的内容。ls -l:以长格式列出当前目录的内容&#x…...
Java线程池知识点梳理
Java线程池知识点梳理 什么是线程池? 线程在系统中创建的成本是相对比较高的,所以使用”池化“的思想,设计线程池,有大量任务需要执行时,可以直接从线程池中使用已经创建好的线程直接去执行。减少线程的创建和销毁带…...
SFT、RLHF、DPO、IFT —— LLM 微调的进化之路_如何搭建自己的dpo
TL;DR • SFT、RLHF 和 DPO 都是先估计 LLMs 本身的偏好,再与人类的偏好进行对齐; • SFT 只通过 LLMs 生成的下一个单词进行估计,而 RLHF 和 DPO 通过 LLMs 生成的完整句子进行估计,显然后者的估计会更准确; • 虽然…...
CSS 选择器简单回顾
引言 当我们探讨网页设计和开发时, CSS(层叠样式表) 无疑是一个不可或缺的技术, 它使我们能够精确控制网页的外观和布局, 为用户创造出独特的视觉体验、以及良好的交互体验!! 而一个完整的 CSS 规则则是由两个主要部分组成: 选择器和声明块 那么今天我们就来盘点下常见的几种选…...
uniapp配置微信小程序分包(分包优化)
1.manifest.json中 源码视图中找到mp-weixin,新增代码"optimization":{"subPackages":true},如下图所示 "optimization" : {"subPackages" : true } 2.pages.json中 分包内静态文件示例 "subPackages&…...
MySQL-10.DML-添加数据insert
一.DML(INSERT) -- DDL:数据操作语言 -- DML:插入数据 - insert -- 1.为tb_emp表的username,name,gender字段插入值 insert into tb_emp (username,name,gender) values (wuji,无忌,1); -- 这样会报错,因为create_ti…...
ARM/Linux嵌入式面经(四八):tp-link联洲国际
文章目录 1. **模电基础**:请解释共射电路的工作原理,并描述如何计算其放大倍数。工作原理放大倍数计算面试官追问及回答2. **DCDC损耗**:有哪些方法可以降低DCDC转换器的损耗?3. **示波器使用**:如何用示波器正确测量DCDC的开关纹波?4. **IIC通信**:IIC通信协议中是否需…...
代码实践篇四 形状检测与规则重建
本节内容主要涉及形状检测(Shape Detection)与形状重建(Shape Reconstruction),具体算法步骤会在后续章节介绍。CGAL在6.0重点更新了形状重建部分的一些模块——动态空间分割与动态形状重建等,也会在后续详…...
JVM(HotSpot):GC之垃圾回收阶段
文章目录 前言一、标记清除算法(Mark Sweep)二、标记整理算法(Mark Compact)三、复制算法(Copy) 前言 标记出垃圾对象之后,就要进行清理。 那么,如何清理? 这里也有相应的算法。 主要有三种。 一、标记清除算法(Mark Sweep) 原理说明&…...
Go 项目如何集成类似mybatisPlus插件呢?GORM走起!!
导读: 在 Go 项目中,虽然没有像 MyBatis Plus 这样特定的 ORM 插件,但可以使用功能相似的 Go ORM 框架,比如 GORM,它支持链式查询、自动迁移、预加载等功能,与 MyBatis Plus 有相似之处。通过一些插件或扩…...
《深度学习》Dlib库 CNN卷积神经网络 人脸识别
目录 一、如何实现CNN人脸识别 1、CNN核心概念 1)卷积层 2)池化层 3)激活函数 4)全连接层 2、步骤 1)加载预训练的人脸识别模型 2)读取图像并检测人脸 3)提取人脸特征向量 4…...
319嵌入式
1.关于lcd的时序图,为什么读操作时,vaild data在E拉高后,而写操作vaild data 在E拉高前写操作:数据必须在 E 上升沿之前稳定(因为 LCD 要”有效采样”) 读操作:数据在 E 拉高之后才有效…...
破局迷茫:Java 2026行业前瞻、零基础通关路径与理科大学生职业跃迁全攻略
你是否正站在人生的十字路口,被一连串的问题反复拷问:听过Java的大名,却始终搞不懂它到底是什么、能支撑你走多远?想入门编程,却面对海量资料无从下手,怕走弯路、怕投入时间最终竹篮打水?刷到无…...
Taskwarrior完整国际化指南:如何实现多语言任务管理
Taskwarrior完整国际化指南:如何实现多语言任务管理 【免费下载链接】taskwarrior Taskwarrior - Command line Task Management 项目地址: https://gitcode.com/gh_mirrors/ta/taskwarrior Taskwarrior是一款功能强大的命令行任务管理工具,支持完…...
告别重复操作:MaaYuan让《代号鸢》游戏管理效率提升80%
告别重复操作:MaaYuan让《代号鸢》游戏管理效率提升80% 【免费下载链接】MaaYuan 代号鸢 / 如鸢 一键长草小助手 项目地址: https://gitcode.com/gh_mirrors/ma/MaaYuan 您是否每天花费1小时以上在《代号鸢》或《如鸢》中完成重复日常任务?MaaYua…...
Qwen3-VL:30B部署实操:Clawdbot配置文件详解、飞书Bot权限申请与事件订阅最佳实践
Qwen3-VL:30B部署实操:Clawdbot配置文件详解、飞书Bot权限申请与事件订阅最佳实践 1. 项目概述与准备工作 1.1 项目介绍 本项目将带你从零开始,在CSDN星图AI云平台上私有化部署最强的多模态大模型Qwen3-VL:30B,并通过Clawdbot搭建一个既能…...
线控转向系统 Carsim和Simulink联合仿真模型。 基于横摆角速度增益不变的变传动比模块。 图中分别为角阶跃工况 和 双移线工况 汽车对应的响应曲线,并且与Carsim自带的机械转向对比图。
线控转向系统 Carsim和Simulink联合仿真模型。 基于横摆角速度增益不变的变传动比模块。 图中分别为角阶跃工况 和 双移线工况 汽车对应的响应曲线,并且与Carsim自带的机械转向对比图。这是一个非常专业的汽车动力学控制仿真需求。要实现线控转向(SBW&am…...
探索Matlab在自动驾驶中的计算机视觉应用
Matlab自动驾驶,基于Matlab实现的计算机视觉代码。 计算机视觉是一门研究如何使机器“看”的科学,更进一步的说,就是是指用摄影机和电脑代替人眼对目标进行识别、跟踪和测量等机器视觉,并进一步做图形处理。 代码可正常运行在自动…...
外卖系统订单模块设计避坑指南:地址簿管理与状态流转实战
外卖系统订单模块设计避坑指南:地址簿管理与状态流转实战 中午12点,写字楼里的白领们纷纷打开外卖APP下单午餐。短短几分钟内,系统需要处理成千上万笔订单——验证用户地址、确认支付状态、通知商家接单。这背后是一套复杂的订单系统在支撑&a…...
QuickBMS游戏资源提取指南:从逆向工程到模组制作的全能工具
QuickBMS游戏资源提取指南:从逆向工程到模组制作的全能工具 【免费下载链接】QuickBMS QuickBMS by aluigi - Github Mirror 项目地址: https://gitcode.com/gh_mirrors/qui/QuickBMS QuickBMS是一款功能强大的跨平台游戏资源提取工具,通过简单的…...
深圳LED显示屏生产厂家
行业痛点分析深圳作为中国LED显示屏产业的重要基地,虽然技术和市场发展成熟,但仍面临诸多挑战。当前,技术挑战主要集中在高密度显示的像素一致性、高亮度与高对比度的平衡、以及异形定制的复杂工艺上。数据表明,超过60%的LED显示屏…...
