Vue3 使用動態組件 component

component 標簽:用于動態渲染標簽或組件。

語法格式:

<component is="標簽或組件名">標簽內容</component>

動態渲染標簽:

<template><h3>我是父組件</h3><component is="h1">動態渲染 h1 標簽</component>
</template>

效果:

動態渲染組件:
?

<template><h3>我是父組件</h3><button @click="isShow = !isShow">切換組件</button><hr /><!-- 如果 isShow 為 true 就顯示 A 組件,否則顯示 B 組件 --><component :is="isShow ? A : B"></component>
</template><script setup>
// 引入組件
import A from '../components/A';
import B from '../components/B';
// 引入 ref 函數
import { ref } from 'vue';
const isShow = ref(true);
</script>

效果:

原創作者:吳小糖

創作時間:2024.2.23?

本文來自互聯網用戶投稿,該文觀點僅代表作者本人,不代表本站立場。本站僅提供信息存儲空間服務,不擁有所有權,不承擔相關法律責任。
如若轉載,請注明出處:http://www.pswp.cn/news/696984.shtml
繁體地址,請注明出處:http://hk.pswp.cn/news/696984.shtml
英文地址,請注明出處:http://en.pswp.cn/news/696984.shtml

如若內容造成侵權/違法違規/事實不符,請聯系多彩編程網進行投訴反饋email:809451989@qq.com,一經查實,立即刪除!

相關文章

SpringCloud(15)之SpringCloud Gateway

一、Spring Cloud Gateway介紹 Spring Cloud Gateway 是Spring Cloud團隊的一個全新項目&#xff0c;基于Spring 5.0、SpringBoot2.0、 Project Reactor 等技術開發的網關。旨在為微服務架構提供一種簡單有效統一的API路由管理方式。 Spring Cloud Gateway 作為SpringCloud生態…

(delphi11最新學習資料) Object Pascal 學習筆記---第5章第3節(自定義托管記錄)

5.3.5 運算符和自定義托管記錄 ? 在 Delphi 語言中&#xff0c;有一組特殊的運算符可用于記錄&#xff0c;以定義自定義托管記錄。在此之前&#xff0c;請允許我回顧一下記錄內存初始化的規則&#xff0c;以及普通記錄和托管記錄之間的區別。 ? Delphi 中的記錄可以包含任何…

大語言模型LangChain本地知識庫:向量數據庫與文件處理技術的深度整合

文章目錄 大語言模型LangChain本地知識庫&#xff1a;向量數據庫與文件處理技術的深度整合引言向量數據庫在LangChain知識庫中的應用文件處理技術在知識庫中的角色向量數據庫與文件處理技術的整合實踐挑戰與展望結論 大語言模型LangChain本地知識庫&#xff1a;向量數據庫與文件…

【Unity】MySql +Navicat 安裝教程

問題描述 在使用Unity開發的時候&#xff0c;有的時候我們是需要使用Mysql數據庫的&#xff0c;本教程使用的MySql 和Navicat均為免安裝版 ?mysql安裝 1.下載mysql解壓至任意目錄&#xff0c;此處以“C:\mysql-5.6.39-winx64”為例. mysql百度云連接&#xff1a; 鏈接&…

Java的遞歸【詳解】

1.認識遞歸基礎知識 什么是方法遞歸&#xff1f; 遞歸是一種算法&#xff0c;在程序設計語言中廣泛應用。 從形式上說&#xff1a;方法調用自身的形式稱為方法遞歸&#xff08; recursion&#xff09;。 遞歸的形式&#xff1a; 直接遞歸&#xff1a;方法自己調用自己。 間接遞…

【監控】Spring Boot+Prometheus+Grafana實現可視化監控

目錄 1.概述 2.spring actuator 3.Prometheus 3.1.介紹 3.2.使用 1.client端的配置 2.server端的配置 4.grafana 5.留個尾巴 1.概述 本文是博主JAVA監控技術系列的第四篇&#xff0c;前面已經聊過了JMX、Spring actuator等技術&#xff0c;本文我們就將依托于Spring …

利用docker一鍵部署LLaMa到自己的Linux服務器,有無GPU都行、可以指定GPU數量、支持界面對話和API調用,離線本地化部署包含模型權重合并

利用docker一鍵部署LLaMa到自己的Linux服務器,有無GPU都行、可以指定GPU數量、支持界面對話和API調用,離線本地化部署包含模型權重合并。兩種方式實現支持界面對話和API調用,一是通過搭建text-generation-webui。二是通過llamma.cpp轉換模型為轉換為 GGUF 格式,使用 quanti…

Leetcode日記 889. 根據前序和后序遍歷構造二叉樹

Leetcode日記 889. 根據前序和后序遍歷構造二叉樹 給定兩個整數數組&#xff0c;preorder 和 postorder &#xff0c;其中 preorder 是一個具有 無重復 值的二叉樹的前序遍歷&#xff0c;postorder 是同一棵樹的后序遍歷&#xff0c;重構并返回二叉樹。 如果存在多個答案&#…

【Flink集群RPC通訊機制(三)】AkkaRpcActor設計與實現:接收RPC消息以及處理邏輯

文章目錄 1. 創建Receiver2. 進行消息處理 RPC請求發送后接收方的處理邏輯 在RpcEndpoint中創建的RemoteRpcInvocation消息&#xff0c;最終會通過Akka系統傳遞到被調用方。例如TaskExecutor向ResourceManager發送SlotReport請求的時候&#xff0c;會在TaskExecutor中將Resourc…

petalinux_zynq7 驅動DAC以及ADC模塊之二:petalinux

petalinux_zynq7 C語言驅動DAC以及ADC模塊之一&#xff1a;建立IPhttps://blog.csdn.net/qq_27158179/article/details/136234296在上一篇&#xff0c;建立了ADC和DAC兩個IP。這里繼續。本文在 petalinux默認配置的基礎上&#xff0c;添加了python和qt。再編譯出sdk可以給x86主…

汽車智能座艙中 顯示屏市場戰略趨勢分析 中篇

今天主要講講主流車廠顯示屏的趨勢。 主流車廠的中控&液晶儀表屏的尺寸及趨勢匯總 奔馳 奔馳A級 10.2510.25 奔馳C級 12.310.25 奔馳GLA 10.2510.25 奔馳E級 12.312.3 奔馳S級 12.312.8 1、奔馳的儀表幾乎都為液晶儀表&#xff0c;幾乎所有車型都有HUD的選配&#xff…

大功率應用中的厚膜電阻散熱器的設計?

在許多大功率應用中&#xff0c;例如電機和電源&#xff0c;電源電阻器位于主電源線中。它們的目的是防止損壞或提供一定程度的控制。 在這些應用中&#xff0c;電阻器承受恒定的、相對較高的電流。當電流流過電阻器時&#xff0c;它會產生熱量。這種熱能必須消散到環境中&…

1、WEB攻防-通用漏洞SQL注入MYSQL跨庫ACCESS偏移

用途&#xff1a;個人學習筆記&#xff0c;歡迎指正&#xff01; 前言&#xff1a; 為了網站和數據庫的安全性&#xff0c;MYSQL 內置有 ROOT 最高用戶&#xff0c;劃分等級&#xff0c;每個用戶對應管理一個數據庫&#xff0c;這樣保證無不關聯&#xff0c;從而不會影響到其他…

Autosar-WdgM配置詳解-3

1.11生成代碼解析 1.11.1MasterSWC代碼解析 在MasterSWC的RE_TestRun這個runnable里會調用兩個檢測點函數,我們可以在兩個檢測點函數之間,加入我們所需要監控的代碼。 ?Rte_Call_RPort_StartCheckPoint_CheckpointReached(); ?Rte_Call_RPort_EndCheckPoint_CheckpointReac…

C#串口 Modbus通訊工具類

一、安裝Modbus包 二、創建modbushelper類 1、打開串口 public bool IfCOMOpend; //用于實例內的COM口的狀態 public SerialPort OpenedCOM;//用于手動輸入的COM轉成SERIAL PORT /// <summary> /// 打開串口 /// </summary> /// <param name="COMname&quo…

unity小工具-非實時的值變化監聽器

項目里有代碼專門監聽網絡環境的變化&#xff0c;特別是在下載中&#xff0c;如果遇到斷網或者切換為移動網絡&#xff0c;可能需要觸發提醒等等。這種需求可能是通用的&#xff0c;于是便寫了一個通用的監聽代碼。是 using System; using System.Collections; using System.C…

c++服務器開源項目Tinywebserver運行

c服務器開源項目Tinywebserver運行 一、Tinywebserver介紹二、環境搭建三、構建數據庫四、編譯Tinywebserver五、查看效果 Tinywebserver是github上一個十分優秀的開源項目&#xff0c;幫助初學者學習如何搭建一個服務器。 本文講述如何在使用mysql跟該項目進行連接并將項目運行…

python 層次分析(AHP)

文章目錄 一、算法原理二、案例分析2.1 構建指標層判斷矩陣2.2 求各指標權重2.2.1 算術平均法&#xff08;和積法&#xff09;2.2.2 幾何平均法&#xff08;方根法&#xff09; 2.3 一致性檢驗2.3.1 求解最大特征根值2.3.2 求解CI、RI、CR值2.3.3 一致性判斷 2.4 分別求解方案層…

利用Ubuntu22.04啟動U盤對電腦磁盤進行格式化

概要&#xff1a; 本篇演示利用Ubuntu22.04啟動U盤的Try Ubuntu模式對電腦磁盤進行格式化 一、說明 1、電腦 筆者的電腦品牌是acer(宏碁/宏基) 開機按F2進入BIOS 開機按F12進入Boot Manager 2、Ubuntu22.04啟動U盤 制作方法參考筆者的文章&#xff1a; Ubuntu制作Ubun…

【OpenAI官方課程】第五課:ChatGPT文本轉換Transforming

歡迎來到ChatGPT 開發人員提示工程課程&#xff08;ChatGPT Prompt Engineering for Developers&#xff09;&#xff01;本課程將教您如何通過OpenAI API有效地利用大型語言模型&#xff08;LLM&#xff09;來創建強大的應用程序。 本課程由OpenAI 的Isa Fulford和 DeepLearn…