Vue.js组件开发-实现组件切换效果的两种方法 条件渲染、动态组件
在Vue.js中,实现组件切换效果通常依赖于条件渲染或动态组件。
方法一:条件渲染
条件渲染使用v-if、v-else-if和v-else指令来根据条件展示或隐藏组件。这种方法适用于需要在不同条件下展示不同组件的场景。
<template><div><button @click="currentComponent = 'componentA'">显示组件A</button><button @click="currentComponent = 'componentB'">显示组件B</button><componentA v-if="currentComponent === 'componentA'" /><componentB v-else-if="currentComponent === 'componentB'" /><!-- 可以根据需要添加更多的条件渲染 --></div>
</template><script>
import ComponentA from './ComponentA.vue';
import ComponentB from './ComponentB.vue';export default {components: {componentA: ComponentA,componentB: ComponentB// 注册其他需要的组件},data() {return {currentComponent: 'componentA' // 默认显示的组件};}
};
</script>
这个例子中,currentComponent的数据属性决定了哪个组件应该被渲染。当用户点击按钮时,currentComponent的值会改变,从而触发条件渲染,显示或隐藏相应的组件。
方法二:动态组件
动态组件使用<component>标签和is属性来根据一个动态的值渲染不同的组件。这种方法更加灵活,特别是当有多个组件需要切换时。
<template><div><button @click="currentComponent = 'ComponentA'">显示组件A</button><button @click="currentComponent = 'ComponentB'">显示组件B</button><component :is="currentComponent" /></div>
</template><script>
import ComponentA from './ComponentA.vue';
import ComponentB from './ComponentB.vue';export default {components: {ComponentA,ComponentB// 注册其他需要的组件,组件名就是注册时的名字},data() {return {currentComponent: 'ComponentA' // 默认显示的组件名,必须与注册的组件名匹配};}
};
</script>
这个例子中,<component>标签的is属性绑定到currentComponent数据属性上。当用户点击按钮时,currentComponent的值会改变为相应的组件名,从而触发动态组件的渲染。
注意
1.组件注册:确保要切换的组件都已经在父组件中正确注册。
2.组件名:在使用动态组件时,currentComponent的值必须与注册的组件名完全匹配(包括大小写,除非你在配置中设置了kebab-case)。
3.性能考虑:如果切换的组件很多或者切换频率很高,考虑使用keep-alive组件来缓存不活动的组件实例,以提高性能。
4.生命周期钩子:注意组件的生命周期钩子会在组件切换时被触发,确保逻辑能够正确处理这些生命周期事件。
相关文章:
Vue.js组件开发-实现组件切换效果的两种方法 条件渲染、动态组件
在Vue.js中,实现组件切换效果通常依赖于条件渲染或动态组件。 方法一:条件渲染 条件渲染使用v-if、v-else-if和v-else指令来根据条件展示或隐藏组件。这种方法适用于需要在不同条件下展示不同组件的场景。 <template><div><button cli…...
primitive 的 Appearance编写着色器材质
import { nextTick, onMounted, ref } from vue import * as Cesium from cesium import gsap from gsaponMounted(() > { ... })// 1、创建矩形几何体,Cesium.RectangleGeometry:几何体,Rectangle:矩形 let rectGeometry new…...
Seata搭建
1.初识Seata Quick Start | Apache Seata 官网 2.准备nacos和 seata 启动nacos startup.cmd -m standalone账号nacos 密码nacos 搭建seata TC 这里下载的 1.4.2 seata-server-1.4.2 1.修改seata配置文件 registry.conf 这里我们使用nacos作为注册中心 和 配置中心 r…...
流浪猫流浪狗领养PHP网站源码
源码介绍 流浪猫流浪狗领养PHP网站源码,适合做猫狗宠物类的发信息发布。当然其他信息发布也是可以的。 导入数据库,修改数据库配置/application/database.php 设置TP伪静态,设置运行目录, 后台:/abcd.php/dashboard?…...
asammdf python 处理MF4文件库简介
asammdf 是一个功能强大的 Python 库,专门用于处理汽车行业常用的 MDF(Measured Data Format)文件。以下是 asammdf 的主要功能总结: 主要功能 读取和写入 MDF 文件: 支持 MDF 文件的版本 3.x 和 4.x。 能够读取和…...
【“软件工程”基础概念学习】
基础和相关概念 英文:Software Engineering 软:物体内部的组织疏松,受外力作用后容易改变形状软件: 计算机系统的组成部分,是指挥计算机进行计算、判断、处理信息的程序系统。通常分为系统软件和应用软件。借指某项活…...
省森林防火应急指挥系统
森林防火形势严峻 我国森林防火形势十分严峻,森林火灾具有季节性强、发现难、成灾迅速等特点,且扑救难度大、影响范围广、造成的损失重。因此,构建森林防火应急指挥系统显得尤为重要。 系统建设模式与架构 森林防火应急指挥系统采用大智慧…...
一键整理背包界面功能
一键整理功能 游戏《帕鲁》中的背包界面有一键整理的功能,就是玩家随意拖拽背包格子里的物品,然后导致背包界面看起来很凌乱,比如物品a在一个格子里数量为1,另一个格子里数量为3,或者还有空格杂夹在有物品的格子旁边,一键排序功能可以解决这个问题,(将相同物品整合到一…...
给DevOps加点料:融入安全性的DevSecOps
从前,安全防护只是特定团队的责任,在开发的最后阶段才会介入。当开发周期长达数月、甚至数年时,这样做没什么问题;但是现在,这种做法现在已经行不通了。 采用 DevOps 可以有效推进快速频繁的开发周期(有时…...
uniapp 使用 pinia 状态持久化
1.创建文件 stores -index.js -global.js2.对应文件内容 index.js 安装插件 npm i pinia-plugin-persistedstate import { createPinia } from pinia; import persist from pinia-plugin-persistedstate; const pinia createPinia(); pinia.use(persist); export default pi…...
HarmonyOS鸿蒙-@State@Prop装饰器限制条件
一、组件Components级别的状态管理: State组件内状态限制条件 1.State装饰的变量必须初始化,否则编译期会报错。 // 错误写法,编译报错 State count: number;// 正确写法 State count: number 10; 2.嵌套属性的赋值观察不到。 // 嵌套的…...
Java Web开发进阶——Spring Boot与Spring Data JPA
Spring Data JPA 是 Spring 提供的一种面向数据访问的持久化框架,它简化了 JPA 的实现,为开发者提供了一种快速操作数据库的方式。在结合 Spring Boot 使用时,开发者能够快速完成数据库访问层的开发。 1. 介绍Spring Data JPA 1.1 什么是Spr…...
Vue Router4
Vue Router 是 Vue.js 官方的路由管理器。Vue Router 基于路由和组件的映射关系,监听页面路径的变化,渲染对应的组件。 安装: npm install vue-router。 基本使用: // src/router/index.js import {createRouter, createWebHa…...
计算机网络之---应用层协议概述
应用层协议概述 应用层协议是OSI模型中的第7层(应用层)定义的一组规则,用于支持和管理不同应用程序之间的通信。应用层协议定义了数据交换的格式、规则和约定,使得不同的系统或应用能够互相理解并正确地交换数据。它直接面向用户并…...
html + css 顶部滚动通知栏示例
前言 在现代网页设计中,一个吸引人的顶部滚动通知栏不仅能够有效传达重要信息,还能提升用户体验。通过使用HTML和CSS,我们可以创建既美观又功能强大的组件,这些组件可以在不影响网站整体性能的情况下提供实时更新或紧急通知。 本…...
【Rust自学】11.6. 控制测试运行:并行和串行(连续执行)测试
喜欢的话别忘了点赞、收藏加关注哦,对接下来的教程有兴趣的可以关注专栏。谢谢喵!(・ω・) 11.6.1. 控制测试的运行方式 cargo test和cargo run一样,cargo test也会编译代码并生成一个二进制文件用于测试,…...
某漫画网站JS逆向反混淆流程分析
文章目录 1. 写在前面1. 接口分析2. 反混淆分析 【🏠作者主页】:吴秋霖 【💼作者介绍】:擅长爬虫与JS加密逆向分析!Python领域优质创作者、CSDN博客专家、阿里云博客专家、华为云享专家。一路走来长期坚守并致力于Pyth…...
React 中事件机制详细介绍:概念与执行流程如何更好的理解
React 的事件机制是一个非常重要的概念,它涉及到 React 如何处理用户的交互事件。React 的事件系统与传统的 DOM 事件系统有所不同,它在底层使用了事件委托和合成事件(Synthetic Events)来优化性能。下面,我们将从 Rea…...
Day04-后端Web基础(Maven基础)
目录 Maven课程内容1. Maven初识1.1 什么是Maven?1.2 Maven的作用1.2.1 依赖管理1.2.2 项目构建1.2.3 统一项目结构 2. Maven概述2.1 Maven介绍2.2 Maven模型2.3 Maven仓库2.4 Maven安装2.4.1 下载2.4.2 安装步骤 3. IDEA集成Maven3.1 配置Maven环境3.1.2 全局设置 3.2 Maven项…...
vue3模板语法+响应式基础
模板语法 1. disabled指令,可以用于禁用按钮 <button :disabled"isButtonDisabled">Button</button> //:disabled是一个指令,用于根据isButtonDisabled的值来动态控制按钮的禁用状态。 使用场景: 1.防止用户重复点击…...
LBE-LEX系列工业语音播放器|预警播报器|喇叭蜂鸣器的上位机配置操作说明
LBE-LEX系列工业语音播放器|预警播报器|喇叭蜂鸣器专为工业环境精心打造,完美适配AGV和无人叉车。同时,集成以太网与语音合成技术,为各类高级系统(如MES、调度系统、库位管理、立库等)提供高效便捷的语音交互体验。 L…...
K8S认证|CKS题库+答案| 11. AppArmor
目录 11. AppArmor 免费获取并激活 CKA_v1.31_模拟系统 题目 开始操作: 1)、切换集群 2)、切换节点 3)、切换到 apparmor 的目录 4)、执行 apparmor 策略模块 5)、修改 pod 文件 6)、…...
STM32+rt-thread判断是否联网
一、根据NETDEV_FLAG_INTERNET_UP位判断 static bool is_conncected(void) {struct netdev *dev RT_NULL;dev netdev_get_first_by_flags(NETDEV_FLAG_INTERNET_UP);if (dev RT_NULL){printf("wait netdev internet up...");return false;}else{printf("loc…...
使用分级同态加密防御梯度泄漏
抽象 联邦学习 (FL) 支持跨分布式客户端进行协作模型训练,而无需共享原始数据,这使其成为在互联和自动驾驶汽车 (CAV) 等领域保护隐私的机器学习的一种很有前途的方法。然而,最近的研究表明&…...
JVM垃圾回收机制全解析
Java虚拟机(JVM)中的垃圾收集器(Garbage Collector,简称GC)是用于自动管理内存的机制。它负责识别和清除不再被程序使用的对象,从而释放内存空间,避免内存泄漏和内存溢出等问题。垃圾收集器在Ja…...
c++ 面试题(1)-----深度优先搜索(DFS)实现
操作系统:ubuntu22.04 IDE:Visual Studio Code 编程语言:C11 题目描述 地上有一个 m 行 n 列的方格,从坐标 [0,0] 起始。一个机器人可以从某一格移动到上下左右四个格子,但不能进入行坐标和列坐标的数位之和大于 k 的格子。 例…...
【Go】3、Go语言进阶与依赖管理
前言 本系列文章参考自稀土掘金上的 【字节内部课】公开课,做自我学习总结整理。 Go语言并发编程 Go语言原生支持并发编程,它的核心机制是 Goroutine 协程、Channel 通道,并基于CSP(Communicating Sequential Processes࿰…...
视频字幕质量评估的大规模细粒度基准
大家读完觉得有帮助记得关注和点赞!!! 摘要 视频字幕在文本到视频生成任务中起着至关重要的作用,因为它们的质量直接影响所生成视频的语义连贯性和视觉保真度。尽管大型视觉-语言模型(VLMs)在字幕生成方面…...
【git】把本地更改提交远程新分支feature_g
创建并切换新分支 git checkout -b feature_g 添加并提交更改 git add . git commit -m “实现图片上传功能” 推送到远程 git push -u origin feature_g...
大学生职业发展与就业创业指导教学评价
这里是引用 作为软工2203/2204班的学生,我们非常感谢您在《大学生职业发展与就业创业指导》课程中的悉心教导。这门课程对我们即将面临实习和就业的工科学生来说至关重要,而您认真负责的教学态度,让课程的每一部分都充满了实用价值。 尤其让我…...
