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

Vue 组件 - 动态组件

news 来源：原创 2025/6/29 12:23:39

Vue 渐进式JavaScript 框架基于Vue2的学习笔记 - Vue 组件 - 动态组件

动态组件

选项卡页面示例

更简单写法

增加输入框

弥补措施

总结

动态组件

选项卡页面示例

功能：选项卡功能，设置导航点击哪个显示相应页面。

设置三个全局组件，并在页面中调用；在组件的下方设置触发导航。

示例如下：

<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><title>Title</title><style>footer ul {margin-top:200px;float:left;background-color: #ccc;list-style: none;}footer ul li {width:100px;height: 20px;float:left;line-height: 20px;text-align: center;}</style><script src="../lib/vue.js"></script>
</head>
<body>
<div id="box"><home v-show=" which === 'home'"></home><list v-show=" which === 'list'"></list><shopcar v-show=" which === 'shopcar'"></shopcar><footer><ul><li @click=" which='home'">首页</li><li @click=" which='list'">列表</li><li @click=" which='shopcar'">购物车</li></ul></footer>
</div>
<script>Vue.component("home", {template:`<div>home</div>`})Vue.component("list", {template:`<div>list</div>`})Vue.component("shopcar", {template:`<div>shopcar</div>`})let vm = new Vue({el: "#box",data: {which:'home'}})
</script>
</body>
</html>

效果如下：

更简单写法

使用component组件优化原有写法。

Component是组件控件，is是固定属性；动态绑定状态即可。

示例如下：

<div id="box"><!--<home v-show=" which === 'home'"></home><list v-show=" which === 'list'"></list><shopcar v-show=" which === 'shopcar'"></shopcar>--><component :is="which"></component><footer><ul><li @click=" which='home'">首页</li><li @click=" which='list'">列表</li><li @click=" which='shopcar'">购物车</li></ul></footer>
</div>

动态组件缺点是适配性不好，无法复用。

增加输入框

每个组件都有一个输入框、搜索框，当切换组件后，输入框中的内容无法复用。

在home组件中增加输入框，切换组件后发现原有输入内容消失了。

示例如下：

Vue.component("home", {template:`<div>home<input type="text"></div>`
})

弥补措施

保持活着，首先把数据加载到内存中，等组件创建后再临时从内存中读出来，显示出来。

示例如下：

<keep-alive><component :is="which"></component>
</keep-alive>

总结

Vue 渐进式JavaScript 框架基于Vue2的学习笔记 - Vue 组件 - 动态组件

Vue 组件 - 动态组件

Vue 渐进式JavaScript 框架基于Vue2的学习笔记 - Vue 组件 - 动态组件目录动态组件选项卡页面示例更简单写法增加输入框弥补措施总结动态组件选项卡页面示例功能：选项卡功能，设置导航点击哪个显示相应页面。设置三个全局组件&#…...

编程日记 2025/6/29 12:23:39

ffmpeg滤镜使用

ffmpeg实现画中画效果 FFmpeg中，可以通过overlay将多个视频流、多个多媒体采集设备、多个视频文件合并到一个界面中，生成画中画的效果 FFmpeg 滤镜 overlay 基本参数 x和y x坐标和Y坐标 eof action 遇到 eof表示时的处理方式，默认为重复。…...

编程日记 2025/6/29 12:21:11

【MVC简介-产生原因、演变历史、核心思想、组成部分、使用场景】

MVC简介产生原因： MVC（Model-View-Controller）模式诞生于20世纪70年代，由Trygve Reenskaug在施乐帕克研究中心（Xerox PARC）为Smalltalk语言设计，目的是解决图形用户界面（GUI&…...

编程日记 2025/6/29 12:19:40

基于大模型的房间隔缺损手术全流程预测与方案优化研究报告

目录一、引言 1.1 研究背景与意义 1.2 研究目的与目标 1.3 研究方法与创新点二、房间隔缺损概述 2.1 房间隔缺损定义与分类 2.2 发病机制与病理生理 2.3 流行病学特征三、大模型在房间隔缺损预测中的应用原理 3.1 大模型技术简介 3.2 数据收集与预处理 3.3 模型…...

编程日记 2025/6/29 12:11:49

什么是 CSSD?

文章目录一、什么是 CSSD？CSSD 的职责二、CSSD 是如何工作的？三、CSSD 为什么会重启节点？情况一：网络和存储都断联（失联）情况二：收到其他节点对自己的踢出通知（外部 fencing&#…...

编程日记 2025/6/28 1:21:57

uniapp APP端在线升级（简版）

设计思路： 1.版本比较：应用程序检查其当前版本与远程服务器上可用的最新版本 2. 更新状态指示：如果应用程序是不是最新的版本，则页面提示下载最新版本。 3.下载启动：通过plus.downloader.createDownload()启动新应用…...

编程日记 2025/6/28 3:52:32

2024年蓝桥杯Java B组省赛真题超详解析-分布式队列

问题：你需要回答在某个时刻，队列中有多少个元素具有可见性方案：跟踪每个副节点已经同步到主节点队列的元素数量，并找出所有副节点中同步到的最少元素数量，这个数量即为所有副节点都已经同步的元素数量。解析&#…...

编程日记 2025/6/28 6:18:55

Vue3入门

环境准备: node.js vscode or webstorm 哪个熟悉用哪个这两个都是傻瓜式安装浏览器直接搜索下载即可安装: 安装完node.js之后按住快捷键 winR 打开命令提示符输入node 将显示版本信息接着我们通过 vite 构建vue3工程优点: 轻量快速的热重载（HMR&#xf…...

编程日记 2025/6/28 4:34:30

向量库（Vector Database）概述

向量库（Vector Database）概述 1. 核心概念向量高维空间中的数值数组，通常由模型（如BERT、ResNet）将非结构化数据（文本、图像等）转换为嵌入向量。向量相似性衡量方法：余弦相…...

编程日记 2025/6/28 1:20:32

Oracle迁移达梦遇中断？试试SQLark的断点续迁功能！

在企业级数据迁移项目中，如果迁移单表数据量超过亿行、占用空间超过100GB时，一旦遇到网络中断或迁移报错，往往需要整表重新迁移，导致效率低下，严重影响项目进度。针对这一痛点，SQLark 支持对 Oracle→DM 的…...

编程日记 2025/6/28 1:20:40

上海某海外视频平台Android高级工程师视频一面

问的问题比较细，有很多小细节在里面，平时真不一定会注意到，做一个备忘： 1.Object类里面有哪些方法？ Object 类是 Java 中所有类的根类，它定义了一些基本方法，供所有类继承和重写1. 常用方法 1…...

编程日记 2025/6/29 12:02:30

基于yolov11的汽车损伤检测系统python源码+onnx模型+评估指标曲线+精美GUI界面

【算法介绍】基于YOLOv11的汽车损伤检测系统是一种先进的计算机视觉技术，旨在快速准确地识别汽车的各种损伤类型。该系统利用YOLOv11模型的强大性能，实现了对车辆损伤的精确检测与分类。该系统能够识别的损伤类型包括裂纹（crack&#xff…...

编程日记 2025/6/29 6:17:04

华为IP（3）

DHCP Relay报文格式 DHCP Relay主要负责转发DHCP客户端与DHCP服务器之间的DHCP报文，所以DHCP Relay的报文格式只是把DHCP的报文部分字段做了相应的修改，报文格式没有发生变化 hops：表示当前DHCP报文经过DHCP中继的数目，该字段由…...

编程日记 2025/6/28 1:20:51

面试问题总结：qt工程师/c++工程师

C 语言相关问题答案面试问题总结：qt工程师/c工程师 C 语言相关问题答案目录基础语法与特性内存管理预处理与编译 C 相关问题答案面向对象编程模板与泛型编程STL 标准模板库 Qt 相关问题答案Qt 基础与信号槽机制Qt 界面设计与布局管理Qt 多线程与并发编程目录基础…...

编程日记 2025/6/28 5:17:05

【TS学习】（15）分布式条件特性

在 TypeScript 中，分布式条件类型（Distributive Conditional Types） 是一种特殊的行为，发生在条件类型作用于裸类型参数（Naked Type Parameter） 时。这种特性使得条件类型可以“分布”到联合类型的每个成员…...

编程日记 2025/6/28 1:20:55

四款高效数据报表工具让数据分析更简单

概述在数字化时代，企业和组织越来越依赖数据驱动决策，报表软件成为提高数据可视化能力、优化业务管理的关键工具。本文将为大家介绍四款功能强大的报表软件，帮助不同需求的企业找到合适的解决方案。一、山海鲸报表山海鲸报表是一款零代…...

编程日记 2025/6/28 6:08:49

QT 非空指针软件奔溃

在用QT的实际项目中，出现如下现象： 运行软件再关闭软件，然后再运行软件会崩溃。等待5~10分钟，再运行软件，又正常，百思不得其解，后面找到原因是在头文件里定义指针变量时没有赋初nullptr&#x…...

编程日记 2025/6/28 1:22:21

文章目录前言1.示例程序说明2.SDK API功能介绍2.1 ListDevice2.2 Open2.3 OpenDeviceByIP2.4 Close2.5 DeviceStreamEnable2.6 DeviceStreamFormatDump2.7 DeviceStreamFormatConfig2.8 DeviceReadCurrentEnumData2.9 DeviceReadCalibData2.10 DeviceStreamOn2.11 DeviceStrea…...

编程日记 2025/6/28 1:21:09

WPF中viewmodel单例模式

1、单例模式介绍单例模式是一种创建型设计模式，确保一个类只有一个实例，并提供一个全局访问点来获取这个实例。它常用于需要全局唯一访问点的场景，如配置管理、日志记录、数据库连接等。 2、WPF 中 ViewModel 的单例实现在 WPF 中&#…...

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

AI比人脑更强，因为被植入思维模型【36】时光机理论思维

giszz的理解：据说是软银孙正义提出的一种思维模型，他利用同一时间内的地区差，通过引入技术、思维，在同一地区，形成了时间差。所谓商业模式，有时就是打空间差、时间差，信息差。一、定义时光机…...

编程日记 2025/6/28 1:21:29

SQL Server：用户权限

创建 & 删除 1. 创建用户命令整理创建 admin2 用户 -- 在 master 数据库创建登录名 USE master; BEGINCREATE LOGIN [admin2] WITH PASSWORDNCljslrl0620!, DEFAULT_DATABASE[master], CHECK_EXPIRATIONOFF, CHECK_POLICYON; END;-- 在 db03 数据库创建用户并添加到相应…...

编程日记 2025/6/28 1:20:36

Qt之QTextEdit控制文本滚动, 停止滚动, 开始滚动, 鼠标控制滚动

对工作台文本框进行控制。含以下内容。详细说明在源码中可查看至最底部停止滚动开始滚动源码分两部分. .h文件和.cpp文件 MyTextEdit.h #ifndef MYTEXTEDIT_H #define MYTEXTEDIT_H#include <QObject> #include <QTextEdit> #include <QScrollBar> #includ…...

编程日记 2025/6/28 1:20:39

策略模式与元数据映射模式融合 JSR 380 验证规范实现枚举范围校验

类文件 Target({ElementType.METHOD,ElementType.FIELD,ElementType.ANNOTATION_TYPE,ElementType.CONSTRUCTOR,ElementType.PARAMETER,ElementType.TYPE_USE }) Retention(RetentionPolicy.RUNTIME) Documented Constraint(validatedBy {InEnumValidator.class, InEnumColle…...

编程日记 2025/6/28 1:20:33

9对象树(3)

目录创建自定义的类，最主要的目的,是自定义一个析构函数,在析构函数中,完成打印.方便咱们看到最终的自动销毁对象的效果!!! 写完一个函数的声名之后, 按下 altenter, 在按下enter就可以自动的在对应的 cpp 文件中添加函数的定义了内置类型，析构不会明…...

编程日记 2025/6/28 4:25:45

深入 OpenPDF：高级 PDF 生成与操作技巧

1 引言 1.1 项目背景在许多企业级应用中，生成和操作 PDF 文档是一个常见的需求。PDF（Portable Document Format）因其格式统一、易于打印和分发而被广泛使用。本文将介绍如何使用 OpenPDF 库在 Java 项目中生成和操作 PDF 文档。 1.2 技术选型理由 OpenPDF：OpenPDF 是一…...

编程日记 2025/6/28 1:21:59

电脑屏幕亮度随心控，在Windows上自由调整屏幕亮度的方法

调整电脑屏幕的亮度对于保护视力和适应不同环境光线条件非常重要。无论是在白天强光下还是夜晚昏暗环境中，合适的屏幕亮度都能让您的眼睛更加舒适。本文中简鹿办公小编将向您介绍几种在 Windows 系统中调整屏幕亮度的方法。方法一：使用快捷键大多数笔…...

编程日记 2025/6/29 2:18:18

Navicat导出mysql数据库表结构说明到excel、word，单表导出方式记录

目前只找到一张一张表导出的方式使用information_schema传入表名查询字段名根据需要自行删减，一般保留序号、字段名、类型、说明就行 SELECT COLUMNS.ORDINAL_POSITION AS 序号, COLUMNS.COLUMN_NAME AS 字段名, COLUMNS.COLUMN_TYPE AS 类型(长度), COLUMNS.N…...

编程日记 2025/6/28 3:31:04

【C++笔记】C++常见二叉树OJ和拓扑排序

【C笔记】C常见二叉树OJ和拓扑排序 🔥个人主页：大白的编程日记 🔥专栏：C笔记文章目录【C笔记】C常见二叉树OJ和拓扑排序前言一.二叉树OJ1.1 根据二叉树创建字符串1.2 二叉树的层序遍历1.3 二叉树的最近公共祖先1.4 将二叉搜索…...

编程日记 2025/6/27 2:13:47

ARM-----数据处理、异常处理、模式切换

实列一： 1. 异常向量表 area reset, code, readonly code32 entry area reset, code, readonly：定义一个名为reset的代码区域，只读。 code32：指示编译器生成32位ARM指令。 entry：标记程序的入口点。 2. 程序入口…...

编程日记 2025/6/28 1:20:37

mapbox基础，使用geojson加载line线图层，实现铁路黑白间隔效果

👨‍⚕️ 主页： gis分享者 👨‍⚕️ 感谢各位大佬点赞👍 收藏⭐ 留言📝 加关注✅! 👨‍⚕️ 收录于专栏：mapbox 从入门到精通文章目录一、🍀前言1.1 ☘️mapboxgl.Map 地图对象1.2 ☘️mapboxgl.Map style属性1.3 ☘️line线图层样式二、🍀使用geojson加载…...

编程日记 2025/6/28 6:36:14

Python FastAPI + Celery + RabbitMQ 分布式图片水印处理系统

FastAPI 服务器Celery 任务队列RabbitMQ 作为消息代理定时任务处理首先创建项目结构： c:\Users\Administrator\Desktop\meitu\ ├── app/ │ ├── __init__.py │ ├── main.py │ ├── celery_app.py │ ├── tasks.py │ └── config.py…...

编程日记 2025/6/28 1:21:05

阶段项目：Windows 服务器的组建与管理

项目概述公司简介创鑫公司是一家新成立的小型 IT 公司公司决定组建部署一个小型的企业网络员工人数不到20人使用一台独立的 Windows 服务器提供各种网络服务网络拓扑设计需求权限部分权限部分要求公司的网络管理员对办公计算机和服务器分别进行独立管理&#xff…...

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

【408】26考研-王道计算机408

王道408考研全套视频资料： 讲义01.26考研王道计算机【C语言督学营】02.【408领学班】26考研王道计算机B站独家03.26考研王道计算机【组成原理领学班】04.26王道计算机【计算机网络领学班】05.26考研王道计算机【数据结构领学班】06.26王道计算机【操作系统领学班】…...

编程日记 2025/6/28 1:20:43

数据分析问题思考路径

一、思考问题 1. 确认问题因为背景: 因为5月1日的营业额突然下滑了10%,而历史从未出现过类似的跌幅我想目的: 我想知道本次下滑的原因以此避免再出现这样的异常情况现在思路: 现在能想到是原因是节假日和产品环节转化异常最后感谢: 想请你帮我取数分析一下&#xff0c…...

编程日记 2025/6/28 6:38:31

vue省市区懒加载，用el-cascader 新增和回显

el-cascader对于懒加载有支持方法，小难点在于回显的时候，由于懒加载第一次只有一层，所以要根据选中id数组一层层的加载。子组件 <template><el-cascaderref"cascaderRef"v-model"selectedValue":props"…...

编程日记 2025/6/28 1:21:22

从零构建大语言模型全栈开发指南：第三部分：训练与优化技术-3.3.3领域适配案例：医疗文本分类与法律合同生成

👉 点击关注不迷路 👉 点击关注不迷路 👉 点击关注不迷路文章大纲从零构建大语言模型全栈开发指南-第三部分：训练与优化技术-3.3.3 领域适配案例：医疗文本分类与法律合同生成1. 领域适配的核心挑战与解决方案2. 医疗文本分类：从通用到专业的跃迁2.1 医疗领域适配的技…...

编程日记 2025/6/28 4:05:52

Web网页内嵌 Adobe Pdf Reader 谷歌Chrome在线预览编辑PDF文档

随着数字化办公的普及，PDF文档已成为信息处理的核心载体，虽然桌面端有很多软件可以实现预览编辑PDF文档，而在线在线预览编辑PDF也日益成为一个难题。作为网页内嵌本地程序的佼佼者——猿大师中间件，之前发布的猿大师办公助手&am…...

编程日记 2025/6/28 4:10:35

Python WebSockets 库详解：从基础到实战

1. 引言 WebSocket 是一种全双工、持久化的网络通信协议，适用于需要低延迟的应用，如实时聊天、股票行情推送、在线协作、多人游戏等。相比传统的 HTTP 轮询方式，WebSocket 减少了带宽开销，提高了实时性。在 Python 中&#xff…...

编程日记 2025/6/28 1:21:31

php根据一个数组里面的元素顺序来排序另外一个数组的的顺序

根据arr2的顺序来排序arr $arr [[size_id > 9],[size_id > 1],[size_id > 1],[size_id > 6],[size_id > 6],[size_id > 8],];$arr2 [1,9,6,8];usort($arr, function ($item1, $item2) use ($arr2) {return array_search($item1[size_id], $arr2) - array_s…...

编程日记 2025/6/28 1:20:44

从JVM到分布式锁：高并发架构设计的六把密钥

【300秒速览分布式核心技术栈】作为十年架构老兵，今天用一张图说透高并发系统的底层逻辑： 🔑 JVM锁：synchronized与AQS构筑单机防线，却难逃分布式困局 🔑 数据库锁：MySQL行锁/间隙锁守住…...

编程日记 2025/6/28 1:21:19

《深度剖析SQL游标：复杂数据处理场景下的智慧抉择》

在数据库领域的广袤天地中，SQL游标宛如一把独特的钥匙，为复杂数据处理场景开启了一扇充满可能的大门。它以一种细腻且精准的方式，穿梭于数据库的记录之间，为众多棘手的数据处理难题提供了解决之道。复杂数据处理场景的挑战随着…...

编程日记 2025/6/28 1:59:15

【数据分享】中国3254座水库集水区特征数据集（免费获取）

水库在水循环、碳通量、能量平衡中扮演关键角色，实实在在地影响着我们的生活。其功能和环境影响高度依赖于地理位置、上游流域属性（如地形、气候、土地类型）和水库自身的动态特征（如水位、蒸发量）。但在此之前一直缺乏…...

编程日记 2025/6/28 1:21:54

【蓝桥杯每日一题】4.1

🏝️专栏： 【蓝桥杯备篇】 🌅主页： f狐o狸x "今日秃头刷题，明日荣耀加冕！" 今天我们来练习二分算法不熟悉二分算法的朋友可以看：【C语言刷怪篇】二分法_编程解决算术问题-CSDN博客 …...

编程日记 2025/6/28 1:21:28

PHY——LAN8720A 代码解析 (三)

文章目录 PHY——LAN8720A 代码解析 (三)PHY 源码解析ETH_PHY_IO_InitETH_PHY_IO_DeInitETH_PHY_IO_WriteRegETH_PHY_IO_ReadRegETH_PHY_IO_GetTick LAN8720 源码解析LAN8720_RegisterBusIOLAN8720_InitLAN8720_DisablePowerDownModeLAN8720_EnablePowerDownMode PHY——LAN872…...

编程日记 2025/6/28 3:41:10

【工具】BioPred一个用于精准医疗中生物标志物分析的 R 软件包

介绍 R 语言包 BioPred 提供了一系列用于精准医疗中的亚组分析和生物标志物分析的工具。它借助极端梯度提升（XGBoost）算法，并结合倾向得分加权和 A 学习方法，帮助优化个体化治疗规则，从而简化亚组识别过程。BioPred 还…...

编程日记 2025/6/28 1:20:52

如何修复 SQL Server 数据库中的恢复挂起状态？

原文：如何修复 SQL Server 数据库中的恢复挂起状态？ | w3cschool笔记当我们想与关系数据库交互时，SQL 就会出现并帮助用户与数据库进行交互。SQL 从高级语言中获取用户的输入，然后访问将代码转换为机器可理解的形式。SQL 确实会…...

编程日记 2025/6/28 6:02:54

C++11QT复习（十）

基类与派生类之间的转换 **Day7-4 基类与派生类之间的转换****一、问题回顾****二、基类与派生类间的转换****1. 类型适应（Upcasting）****2. 逆向转换（Downcasting）** **三、代码示例****四、派生类间的复制控制****五、总结****1…...

编程日记 2025/6/28 5:32:46

Linux——冯 • 诺依曼体系结构操作系统初识

目录 1. 冯 • 诺依曼体系结构 1.1 冯•诺依曼体系结构推导 1.2 内存提高冯•诺依曼体系结构效率的方法 1.3 理解数据流动 2. 初步认识操作系统 2.1 操作系统的概念 2.2 设计OS的目的 3. 操作系统的管理精髓 1. 冯 • 诺依曼体系结构 1.1 冯•诺依曼体系结构推导计算…...

编程日记 2025/6/28 1:22:03

JVM 学习计划表（2025 版）

JVM 学习计划表（2025 版） 📚 基础阶段（2 周） 1. JVM 核心概念 JVM 作用与体系结构理解 JVM 在 Java 跨平台运行中的核心作用，掌握类加载子系统、运行时数据区、执行引擎的交互流程内存结构与数据存…...

编程日记 2025/6/28 1:21:50

arm_mat_init_f32用法 dsp库

arm_mat_init_f32 是 CMSIS DSP 库中的一个函数，用于初始化一个浮点矩阵结构体。以下是其使用方法： 函数原型 c复制 void arm_mat_init_f32(arm_matrix_instance_f32 * S,uint16_t nRows,uint16_t nColumns,float32_t * pData ); 参数说明 S&#xf…...

编程日记 2025/6/28 1:20:45

动态组件

选项卡页面示例

更简单写法

增加输入框

弥补措施

总结

相关文章：