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

Vue.js组件开发-实现组件切换效果的两种方法 条件渲染、动态组件

在Vue.js中,实现组件切换效果通常依赖于条件渲染或动态组件。

方法一:条件渲染

条件渲染使用v-if、v-else-ifv-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中&#xff0c;实现组件切换效果通常依赖于条件渲染或动态组件。 方法一&#xff1a;条件渲染 条件渲染使用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、创建矩形几何体&#xff0c;Cesium.RectangleGeometry&#xff1a;几何体&#xff0c;Rectangle&#xff1a;矩形 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网站源码&#xff0c;适合做猫狗宠物类的发信息发布。当然其他信息发布也是可以的。 导入数据库&#xff0c;修改数据库配置/application/database.php 设置TP伪静态&#xff0c;设置运行目录&#xff0c; 后台&#xff1a;/abcd.php/dashboard?…...

asammdf python 处理MF4文件库简介

asammdf 是一个功能强大的 Python 库&#xff0c;专门用于处理汽车行业常用的 MDF&#xff08;Measured Data Format&#xff09;文件。以下是 asammdf 的主要功能总结&#xff1a; 主要功能 读取和写入 MDF 文件&#xff1a; 支持 MDF 文件的版本 3.x 和 4.x。 能够读取和…...

【“软件工程”基础概念学习】

基础和相关概念 英文&#xff1a;Software Engineering 软&#xff1a;物体内部的组织疏松&#xff0c;受外力作用后容易改变形状软件&#xff1a; 计算机系统的组成部分&#xff0c;是指挥计算机进行计算、判断、处理信息的程序系统。通常分为系统软件和应用软件。借指某项活…...

省森林防火应急指挥系统

森林防火形势严峻 我国森林防火形势十分严峻&#xff0c;森林火灾具有季节性强、发现难、成灾迅速等特点&#xff0c;且扑救难度大、影响范围广、造成的损失重。因此&#xff0c;构建森林防火应急指挥系统显得尤为重要。 系统建设模式与架构 森林防火应急指挥系统采用大智慧…...

一键整理背包界面功能

一键整理功能 游戏《帕鲁》中的背包界面有一键整理的功能,就是玩家随意拖拽背包格子里的物品,然后导致背包界面看起来很凌乱,比如物品a在一个格子里数量为1,另一个格子里数量为3,或者还有空格杂夹在有物品的格子旁边,一键排序功能可以解决这个问题,(将相同物品整合到一…...

给DevOps加点料:融入安全性的DevSecOps

从前&#xff0c;安全防护只是特定团队的责任&#xff0c;在开发的最后阶段才会介入。当开发周期长达数月、甚至数年时&#xff0c;这样做没什么问题&#xff1b;但是现在&#xff0c;这种做法现在已经行不通了。 采用 DevOps 可以有效推进快速频繁的开发周期&#xff08;有时…...

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级别的状态管理&#xff1a; State组件内状态限制条件 1.State装饰的变量必须初始化&#xff0c;否则编译期会报错。 // 错误写法&#xff0c;编译报错 State count: number;// 正确写法 State count: number 10; 2.嵌套属性的赋值观察不到。 // 嵌套的…...

Java Web开发进阶——Spring Boot与Spring Data JPA

Spring Data JPA 是 Spring 提供的一种面向数据访问的持久化框架&#xff0c;它简化了 JPA 的实现&#xff0c;为开发者提供了一种快速操作数据库的方式。在结合 Spring Boot 使用时&#xff0c;开发者能够快速完成数据库访问层的开发。 1. 介绍Spring Data JPA 1.1 什么是Spr…...

Vue Router4

Vue Router 是 Vue.js 官方的路由管理器。Vue Router 基于路由和组件的映射关系&#xff0c;监听页面路径的变化&#xff0c;渲染对应的组件。 安装&#xff1a; npm install vue-router。 基本使用&#xff1a; // src/router/index.js import {createRouter, createWebHa…...

计算机网络之---应用层协议概述

应用层协议概述 应用层协议是OSI模型中的第7层&#xff08;应用层&#xff09;定义的一组规则&#xff0c;用于支持和管理不同应用程序之间的通信。应用层协议定义了数据交换的格式、规则和约定&#xff0c;使得不同的系统或应用能够互相理解并正确地交换数据。它直接面向用户并…...

html + css 顶部滚动通知栏示例

前言 在现代网页设计中&#xff0c;一个吸引人的顶部滚动通知栏不仅能够有效传达重要信息&#xff0c;还能提升用户体验。通过使用HTML和CSS&#xff0c;我们可以创建既美观又功能强大的组件&#xff0c;这些组件可以在不影响网站整体性能的情况下提供实时更新或紧急通知。 本…...

【Rust自学】11.6. 控制测试运行:并行和串行(连续执行)测试

喜欢的话别忘了点赞、收藏加关注哦&#xff0c;对接下来的教程有兴趣的可以关注专栏。谢谢喵&#xff01;(&#xff65;ω&#xff65;) 11.6.1. 控制测试的运行方式 cargo test和cargo run一样&#xff0c;cargo test也会编译代码并生成一个二进制文件用于测试&#xff0c;…...

某漫画网站JS逆向反混淆流程分析

文章目录 1. 写在前面1. 接口分析2. 反混淆分析 【&#x1f3e0;作者主页】&#xff1a;吴秋霖 【&#x1f4bc;作者介绍】&#xff1a;擅长爬虫与JS加密逆向分析&#xff01;Python领域优质创作者、CSDN博客专家、阿里云博客专家、华为云享专家。一路走来长期坚守并致力于Pyth…...

React 中事件机制详细介绍:概念与执行流程如何更好的理解

React 的事件机制是一个非常重要的概念&#xff0c;它涉及到 React 如何处理用户的交互事件。React 的事件系统与传统的 DOM 事件系统有所不同&#xff0c;它在底层使用了事件委托和合成事件&#xff08;Synthetic Events&#xff09;来优化性能。下面&#xff0c;我们将从 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指令&#xff0c;可以用于禁用按钮 <button :disabled"isButtonDisabled">Button</button> //:disabled是一个指令&#xff0c;用于根据isButtonDisabled的值来动态控制按钮的禁用状态。 使用场景&#xff1a; 1.防止用户重复点击…...

练习(含atoi的模拟实现,自定义类型等练习)

一、结构体大小的计算及位段 &#xff08;结构体大小计算及位段 详解请看&#xff1a;自定义类型&#xff1a;结构体进阶-CSDN博客&#xff09; 1.在32位系统环境&#xff0c;编译选项为4字节对齐&#xff0c;那么sizeof(A)和sizeof(B)是多少&#xff1f; #pragma pack(4)st…...

聊聊 Pulsar:Producer 源码解析

一、前言 Apache Pulsar 是一个企业级的开源分布式消息传递平台&#xff0c;以其高性能、可扩展性和存储计算分离架构在消息队列和流处理领域独树一帜。在 Pulsar 的核心架构中&#xff0c;Producer&#xff08;生产者&#xff09; 是连接客户端应用与消息队列的第一步。生产者…...

MVC 数据库

MVC 数据库 引言 在软件开发领域,Model-View-Controller(MVC)是一种流行的软件架构模式,它将应用程序分为三个核心组件:模型(Model)、视图(View)和控制器(Controller)。这种模式有助于提高代码的可维护性和可扩展性。本文将深入探讨MVC架构与数据库之间的关系,以…...

汇编常见指令

汇编常见指令 一、数据传送指令 指令功能示例说明MOV数据传送MOV EAX, 10将立即数 10 送入 EAXMOV [EBX], EAX将 EAX 值存入 EBX 指向的内存LEA加载有效地址LEA EAX, [EBX4]将 EBX4 的地址存入 EAX&#xff08;不访问内存&#xff09;XCHG交换数据XCHG EAX, EBX交换 EAX 和 EB…...

ios苹果系统,js 滑动屏幕、锚定无效

现象&#xff1a;window.addEventListener监听touch无效&#xff0c;划不动屏幕&#xff0c;但是代码逻辑都有执行到。 scrollIntoView也无效。 原因&#xff1a;这是因为 iOS 的触摸事件处理机制和 touch-action: none 的设置有关。ios有太多得交互动作&#xff0c;从而会影响…...

Xen Server服务器释放磁盘空间

disk.sh #!/bin/bashcd /run/sr-mount/e54f0646-ae11-0457-b64f-eba4673b824c # 全部虚拟机物理磁盘文件存储 a$(ls -l | awk {print $NF} | cut -d. -f1) # 使用中的虚拟机物理磁盘文件 b$(xe vm-disk-list --multiple | grep uuid | awk {print $NF})printf "%s\n"…...

【Elasticsearch】Elasticsearch 在大数据生态圈的地位 实践经验

Elasticsearch 在大数据生态圈的地位 & 实践经验 1.Elasticsearch 的优势1.1 Elasticsearch 解决的核心问题1.1.1 传统方案的短板1.1.2 Elasticsearch 的解决方案 1.2 与大数据组件的对比优势1.3 关键优势技术支撑1.4 Elasticsearch 的竞品1.4.1 全文搜索领域1.4.2 日志分析…...

Xela矩阵三轴触觉传感器的工作原理解析与应用场景

Xela矩阵三轴触觉传感器通过先进技术模拟人类触觉感知&#xff0c;帮助设备实现精确的力测量与位移监测。其核心功能基于磁性三维力测量与空间位移测量&#xff0c;能够捕捉多维触觉信息。该传感器的设计不仅提升了触觉感知的精度&#xff0c;还为机器人、医疗设备和制造业的智…...

【安全篇】金刚不坏之身:整合 Spring Security + JWT 实现无状态认证与授权

摘要 本文是《Spring Boot 实战派》系列的第四篇。我们将直面所有 Web 应用都无法回避的核心问题&#xff1a;安全。文章将详细阐述认证&#xff08;Authentication) 与授权&#xff08;Authorization的核心概念&#xff0c;对比传统 Session-Cookie 与现代 JWT&#xff08;JS…...

算法打卡第18天

从中序与后序遍历序列构造二叉树 (力扣106题) 给定两个整数数组 inorder 和 postorder &#xff0c;其中 inorder 是二叉树的中序遍历&#xff0c; postorder 是同一棵树的后序遍历&#xff0c;请你构造并返回这颗 二叉树 。 示例 1: 输入&#xff1a;inorder [9,3,15,20,7…...