vue如何实现组件切换

一、使用条件渲染 (v-if)

<template><div><button @click="currentView = 'ComponentA'">Show Component A</button><button @click="currentView = 'ComponentB'">Show Component B</button><component-a v-if="currentView === 'ComponentA'"></component-a><component-b v-if="currentView === 'ComponentB'"></component-b></div>
</template>
<script>
import ComponentA from './ComponentA.vue';
import ComponentB from './ComponentB.vue';
export default {data() {return {currentView: 'ComponentA'};},components: {ComponentA,ComponentB}
};
</script>

二、使用动态组件 (component)

<template><div><button @click="currentView = 'ComponentA'">Show Component A</button><button @click="currentView = 'ComponentB'">Show Component B</button><component :is="currentView"></component></div>
</template><script>
import ComponentA from './ComponentA.vue';import ComponentB from './ComponentB.vue';export default {data() {return {currentView: 'ComponentA'};},components: {ComponentA,ComponentB}
};
</script>

 三、点击按钮切换组件

<template><div><button @click="toggleComponent">切换组件</button><div v-if="showComponent"><ComponentA /></div><div v-else><ComponentB /></div></div>
</template><script>
import ComponentA from './ComponentA.vue'
import ComponentB from './ComponentB.vue'export default {data() {return {showComponent: true}},methods: {toggleComponent() {this.showComponent = !this.showComponent}},components: {ComponentA,ComponentB}
}
</script>
<template><div><button @click="toggleComponent">切换组件</button><transition name="fade"><component :is="currentComponent" /></transition></div>
</template><script>
import ComponentA from './ComponentA.vue'
import ComponentB from './ComponentB.vue'export default {data() {return {currentComponent: 'ComponentA'}},methods: {toggleComponent() {this.currentComponent = this.currentComponent === 'ComponentA' ? 'ComponentB' : 'ComponentA'}},components: {ComponentA,ComponentB}
}
</script><style>
.fade-enter-active,
.fade-leave-active {transition: opacity 0.5s;
}.fade-enter,
.fade-leave-to {opacity: 0;
}
</style>

 

本文来自互联网用户投稿,该文观点仅代表作者本人,不代表本站立场。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如若转载,请注明出处:http://www.mzph.cn/bicheng/61051.shtml

如若内容造成侵权/违法违规/事实不符,请联系多彩编程网进行投诉反馈email:809451989@qq.com,一经查实,立即删除!

相关文章

WEB攻防-通用漏洞SQL注入sqlmapOracleMongodbDB2等

SQL注入课程体系&#xff1a; 1、数据库注入-access mysql mssql oracle mongodb postgresql 2、数据类型注入-数字型 字符型 搜索型 加密型&#xff08;base64 json等&#xff09; 3、提交方式注入-get post cookie http头等 4、查询方式注入-查询 增加 删除 更新 堆叠等 …

7.揭秘C语言输入输出内幕:printf与scanf的深度剖析

揭秘C语言输入输出内幕&#xff1a;printf与scanf的深度剖析 C语言往期系列文章目录 往期回顾&#xff1a; VS 2022 社区版C语言的安装教程&#xff0c;不要再卡在下载0B/s啦C语言入门&#xff1a;解锁基础概念&#xff0c;动手实现首个C程序C语言概念之旅&#xff1a;解锁关…

SHELL(4)脚本与用户交互以及if条件判断

声明&#xff01; 学习视频来自B站up主 **泷羽sec** 有兴趣的师傅可以关注一下&#xff0c;如涉及侵权马上删除文章&#xff0c;笔记只是方便各位师傅的学习和探讨&#xff0c;文章所提到的网站以及内容&#xff0c;只做学习交流&#xff0c;其他均与本人以及泷羽sec团队无关&a…

Springboot集成ElasticSearch实现minio文件内容全文检索

一、docker安装Elasticsearch &#xff08;1&#xff09;springboot和Elasticsearch的版本对应关系如下&#xff0c;请看版本对应&#xff1a; 注意安装对应版本&#xff0c;否则可能会出现一些未知的错误。 &#xff08;2&#xff09;拉取镜像 docker pull elasticsearch:7…

部分利用oracle数据字典查询对应信息的语句。

查看当前用户的缺省表空间 SQL>select username,default_tablespace from user_users; 查看当前用户的角色 SQL>select * from user_role_privs; 查看当前用户的系统权限和表级权限 SQL>select * from user_sys_privs; SQL>select * from user_tab_privs; …

#Ts篇: ts学习再梳理

ts类型梳理 类型声明的写法&#xff0c;一律为在标识符后面添加“冒号 类型”。函数参数和返回值&#xff0c;也是这样来声明类型。 function toString(num: number): string {return String(num); }上面示例中&#xff0c;函数toString()的参数num的类型是number。参数列表…

使用chrome 访问虚拟机Apache2 的默认页面,出现了ERR_ADDRESS_UNREACHABLE这个鸟问题

本地环境 主机MacOs Sequoia 15.1虚拟机Parallels Desktop 20 for Mac Pro Edition 版本 20.0.1 (55659)虚拟机-操作系统Ubuntu 22.04 服务器版本 最小安装 开发环境 编辑器编译器调试工具数据库http服务web开发防火墙Vim9Gcc13Gdb14Mysql8Apache2Php8.3Iptables 第一坑 数…

定时器的小应用

第一个项目 第一步&#xff0c;RCC开启时钟&#xff0c;这个基本上每个代码都是第一步&#xff0c;不用多想&#xff0c;在这里打开时钟后&#xff0c;定时器的基准时钟和整个外设的工作时钟就都会同时打开了 RCC_APB1PeriphClockCmd(RCC_APB1Periph_TIM2, ENABLE);第二步&…

【工控】线扫相机小结 第三篇

海康软件更新 目前使用的是 MVS_STD_4.3.2_240705.exe &#xff0c;最新的已经到4.4了。 一个大的变动 在上一篇中我们提到一个问题&#xff1a; 需要注意的是&#xff0c;我们必须先设置 TriggerSelector 是 “FrameBurstStart” 还是 “LineStart” 再设置TriggerMode 是 …

零基础利用实战项目学会Pytorch

目录 pytorch简介 1.线性回归 2.数据类型 2.1数据类型检验 2.2Dimension0/Rank0 2.3 Dim1/Rank1 2.4 Dim2/Rank2 3.一些方法 4.Pytorch完成分类任务 4.1模型参数 4.2 前向传播 4.3训练以及验证 4.4 三行搞定&#xff01; 4.5 准确率 5、Pytorch完成回归任务 5.…

MySQL的游标和While循环的详细对比

MySQL游标和While循环的详细对比 在 MySQL 中&#xff0c;游标和 WHILE 循环是两种常用的处理结果集的机制。它们各自有不同的应用场景和特点。本文将详细对比这两种机制&#xff0c;并提供具体的示例代码和说明。 1. 游标&#xff08;Cursor&#xff09; 游标是一种数据库对…

【#IEEE独立出版、EI稳定检索##高录用 快见刊 稳检索#】2024健康大数据与智能医疗国际会议(ICHIH 2024,12月13-15日)

#IEEE独立出版、EI稳定检索# #往届快至会后3-4个月检索# #高录用 快见刊 稳检索# 2024健康大数据与智能医疗国际会议&#xff08;ICHIH 2024&#xff09; 2024 International Conference on Health Big Data and Intelligent Healthcare 重要信息 大会官网&#xff1a;ww…

C++网络编程之SSL/TLS加密通信

概述 在互联网时代&#xff0c;数据的安全性变得尤为重要。随着网络安全威胁的不断增加&#xff0c;确保信息传输过程中的机密性、完整性和可用性成为了开发者必须考虑的关键因素。在C网络编程中&#xff0c;使用SSL/TLS加密通信是一种常见的做法。它允许客户端和服务器之间通过…

vue3中ElementPlus引入下载icon图标不显示透明问题解决教程方法

问题&#xff1a;今天用vue3开发&#xff0c;使用ElementPlus图标引入了但是不显示&#xff0c;是空白透明 解决&#xff1a; 1、在main.js中引入element-plus/icons-vue图标库 import * as ElIcons from element-plus/icons-vue; // 引入图标库 2、注册所有图标 // 注册所有…

1+X应急响应(网络)系统加固:

系统加固&#xff1a; 数据库的重要性&#xff1a; 数据库面临的风险&#xff1a; 数据库加固&#xff1a; 业务系统加固&#xff1a; 安全设备加固&#xff1a; 网络设备加固&#xff1a;

蓝牙 HFP 协议详解及 Android 实现

文章目录 前言一、什么是蓝牙 HFP 协议&#xff1f;HFP 的核心功能HFP 的核心功能HFP 在 Android 中的典型应用场景 二、HFP 协议的工作流程HFP 的连接流程 三、HFP 在 Android 的实现1. 检查蓝牙适配器状态2. 发现并检测支持 HFP 的设备3. 获取 BluetoothHeadset 服务4. 连接设…

Prometheus面试内容整理-生态系统和集成

Prometheus 作为云原生监控的关键工具之一,拥有广泛的生态系统,并能与多种其他系统和工具集成,从而实现更加全面、灵活的监控方案。Prometheus 的生态系统不仅包括内置的各类组件(如 Alertmanager),还涉及与可视化工具、自动化服务发现平台以及持久化存储的集成。以下是关…

Web导出Excel表格

背景&#xff1a; 1. 后端主导实现 流程&#xff1a;前端调用到导出excel接口 -> 后端返回excel文件流 -> 浏览器会识别并自动下载 场景&#xff1a;大部分场景都有后端来做 2. 前端主导实现 流程&#xff1a;前端获取要导出的数据 -> 常规数据用插件处理成一个e…

【Linux】Github 仓库克隆速度慢/无法克隆的一种解决方法,利用 Gitee 克隆 Github 仓库

Github 经常由于 DNS 域名污染以及其他因素克隆不顺利。 一种办法是修改 hosts sudo gedit /etc/hosts加上一行 XXX.XXX.XXX.XXX github.comXXX 位置的 IP 可以通过网站查询 IP/服务器github.com的信息-站长工具 这种方法比较适合本身可以克隆&#xff0c;但是速度很慢的…

理解反射,学会反射:撬开私有性质(private)的属性与方法

看到这句话的时候证明&#xff1a;此刻你我都在努力 加油陌生人 个人主页&#xff1a;Gu Gu Study专栏&#xff1a;用Java学习数据结构系列喜欢的一句话&#xff1a; 常常会回顾努力的自己&#xff0c;所以要为自己的努力留下足迹喜欢的话可以点个赞谢谢了。作者&#xff1a;小…