当前位置: 首页 > 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.防止用户重复点击…...

2026年4月OpenClaw如何安装?腾讯云2分钟零基础教程及百炼APIKey配置方法

2026年4月OpenClaw如何安装&#xff1f;腾讯云2分钟零基础教程及百炼APIKey配置方法。OpenClaw&#xff08;原Clawdbot&#xff09;作为2026年主流的AI自动化助理平台&#xff0c;可通过阿里云轻量服务器实现724小时稳定运行&#xff0c;并快速接入钉钉&#xff0c;让AI在企业群…...

【flash-attn安装成功却import失败?一个ABI参数引发的‘血案’】

1. 为什么flash-attn安装成功却import失败&#xff1f; 最近在部署Llama2模型时&#xff0c;遇到了一个让人抓狂的问题&#xff1a;明明用pip安装了flash-attn&#xff0c;执行import时却报错提示找不到这个包。更诡异的是&#xff0c;pip list明明显示安装成功了&#xff0c;…...

从LFA到TI-LFA:一张图看懂华为IGP FRR技术演进与选型指南

从LFA到TI-LFA&#xff1a;华为IGP FRR技术全景解析与实战选型 当视频会议因网络抖动出现卡顿时&#xff0c;当金融交易因路由收敛延迟导致订单丢失时&#xff0c;网络工程师们开始意识到&#xff1a;传统的IGP收敛机制已无法满足现代业务对可靠性的苛刻要求。这背后是毫秒级故…...

06-AI 编程助手实战

OpenClaw + ACP:AI 编程助手实战 “让 AI 帮你写代码、调 Bug、做重构——这就是 ACP 的魔力。” 在软件开发领域,如何让 AI 真正成为程序员的得力助手,而非仅仅是「代码补全工具」?OpenClaw 给出的答案是 ACP(Agent Coding Protocol)。通过这一协议,OpenClaw 能够与业界…...

[LangChain智能体本质论-01]两种视角看待Agent和ReAct循环

作为LangChain智能体的Agent采用一种被称为ReAct循环的执行流程&#xff08;如下图所示&#xff09;&#xff0c;这是一种结合了“推理”&#xff08;Reasoning&#xff09;与“行动”&#xff08;Acting&#xff09;的交互模式&#xff0c;旨在让Agent能像人类一样通过逻辑思考…...

Jmeter接口测试项目实战

&#x1f345; 点击文末小卡片&#xff0c;免费获取软件测试全套资料&#xff0c;资料在手&#xff0c;涨薪更快 1、什么是jmeter&#xff1f;JMeter是100%完全由Java语言编写的&#xff0c;免费的开源软件&#xff0c;是非常优秀的性能测试和接口测试工具&#xff0c;支持主流…...

开源工具:IDM Activation Script彻底解决激活弹窗问题的技术方案

开源工具&#xff1a;IDM Activation Script彻底解决激活弹窗问题的技术方案 【免费下载链接】IDM-Activation-Script IDM Activation & Trail Reset Script 项目地址: https://gitcode.com/gh_mirrors/id/IDM-Activation-Script Internet Download Manager&#xf…...

Deep-Live-Cam架构深度解析:构建实时AI换脸系统的技术实现与优化策略

Deep-Live-Cam架构深度解析&#xff1a;构建实时AI换脸系统的技术实现与优化策略 【免费下载链接】Deep-Live-Cam real time face swap and one-click video deepfake with only a single image 项目地址: https://gitcode.com/GitHub_Trending/de/Deep-Live-Cam 在数字…...

ROS与Webots协同开发:舵轮底盘运动控制实战解析

1. 舵轮底盘的核心原理与结构设计 舵轮底盘作为全向移动机器人的核心部件&#xff0c;其独特之处在于每个轮子都具备独立转向和驱动的能力。这种设计使得机器人能够在平面内实现任意方向的平移和旋转&#xff0c;完全突破了传统差速底盘的运动限制。我曾在物流AGV项目中实测过&…...

如何用代码快速绘制专业图表?Mermaid Live Editor彻底改变你的可视化工作流

如何用代码快速绘制专业图表&#xff1f;Mermaid Live Editor彻底改变你的可视化工作流 【免费下载链接】mermaid-live-editor Edit, preview and share mermaid charts/diagrams. New implementation of the live editor. 项目地址: https://gitcode.com/GitHub_Trending/me…...