vue笔记之组件切换

最新推荐文章于 2025-06-20 12:26:34 发布
原创 最新推荐文章于 2025-06-20 12:26:34 发布 · 942 阅读 · 0 ·
CC 4.0 BY-SA版权
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
文章标签：

#vue 

<!DOCTYPE html>
<html lang="en">
<head>
	<meta charset="UTF-8">
	<title>Document</title>
	<script src="https://cdn.bootcss.com/vue/2.2.2/vue.min.js"></script>
	<style type="text/css">
	
	</style>
</head>
<body>
	<div id="app">
		<a href="" @click.prevent="flag=true">登录</a>
		<a href="" @click.prevent="flag=false">注册</a>
		<login v-if="flag"></login>
		<register v-else="flag"></register>
	</div>
	
	<script>
		Vue.component("login",{
			
			template:"<h3>登录组件</h3>",
			
		})
		Vue.component("register",{
			
			template:"<h3>注册组件</h3>",
			
		})
		var vm = new Vue ({
			el:'#app',
			data:{
				flag:true
			},
			
		});
		
	</script>
</body>
</html>

<!DOCTYPE html>
<html lang="en">
<head>
	<meta charset="UTF-8">
	<title>Document</title>
	<script src="https://cdn.bootcss.com/vue/2.2.2/vue.min.js"></script>
	<style type="text/css">
	
	</style>
</head>
<body>
	<div id="app">
		<a href="" @click.prevent="comName='login'">登录</a>
		<a href="" @click.prevent="comName='register'">注册</a>
		<!-- Vue提供了component来展示对应名称的组件 -->
		<!-- component是一个占位符，:is属性可以用来指定要展示的组件的名称 -->
		<component :is="comName"></component>
	</div>
	
	<script>
		Vue.component("login",{
			
			template:"<h3>登录组件</h3>",
			
		})
		Vue.component("register",{
			
			template:"<h3>注册组件</h3>",
			
		})
		var vm = new Vue ({
			el:'#app',
			data:{
				comName:'login'//当前component中的:is绑定的组件的名称
			},
			
		});
		
	</script>
</body>
</html>

组件切换动画

<!DOCTYPE html>
<html lang="en">
<head>
	<meta charset="UTF-8">
	<title>Document</title>
	<script src="https://cdn.bootcss.com/vue/2.2.2/vue.min.js"></script>
	<style type="text/css">
		.v-enter,
		.v-leave-to{
			opacity: 0;
			transform:translateX(150px);
		}
		.v-enter-active,
		.v-leave-active{
			transition:all 0.5s ease;
		}
	</style>
</head>
<body>
	<div id="app">
		<a href="" @click.prevent="comName='login'">登录</a>
		<a href="" @click.prevent="comName='register'">注册</a>
		<!-- Vue提供了component来展示对应名称的组件 -->
		<!-- component是一个占位符，:is属性可以用来指定要展示的组件的名称 -->
		<!-- 通过mode属性设置组件切换的时候的模式 -->
		<transition mode="out-in">
			<component :is="comName"></component>
		</transition>
	</div>
	
	<script>
		Vue.component("login",{
			
			template:"<h3>登录组件</h3>",
			
		})
		Vue.component("register",{
			
			template:"<h3>注册组件</h3>",
			
		})
		var vm = new Vue ({
			el:'#app',
			data:{
				comName:'login'//当前component中的:is绑定的组件的名称
			},
			
		});
		
	</script>
</body>
</html>
qq_36781179
关注
vue多个组件实现切换
Rouqier的博客
12-06 1165
vue多个组件实现切换，简单实现
Vue中处理组件切换的三种方式
xiaohanbaby的博客
09-23 4014
Vue中处理组件切换的三种方式： 1.v-if切换： v-if的方式来切换视图:创建和销毁(导致组件的状态不能留存) 2.v-show切换： 显示和隐藏,没有办法操作Dom结构(会保存组件的状态) 3.动态组件切换： 可以操作DOM, 并且可以留存下数据; 切换时触发的生命周期： 激活activated 冻结 deactivated 这两个方法; 用keep-alive可保存组件的状态 代码示例: <template> <div> <butt
vue 组件切换
szw_18583757301的博客
07-20 906
&lt;template&gt; &lt;div&gt; &lt;div class="nav"&gt; &lt;div class="assets " v-for="(item,index) in components" :key="index" :id="item.id" :class="
Vue3：动态切换组件的写法格式
最新发布
全局可见
06-20 333
缓存所有组件可能导致内存占用过高，仅对需要保留状态的组件使用。的值必须与注册的组件名完全一致（大小写敏感）。，否则 Vue 找不到组件定义。选项中注册组件，会报错。局部注册的组件必须先。
VUE切换组件
notagoodwriter的博客
01-06 3464
VUE切换组件
Vue - 视图组件切换的方案
Maggieq8324的博客
09-13 2785
目录前言roure-view 切换视图组件v-if 切换视图组件component 切换视图组件 前言 Vue中切换视图组件的方案大致有三种 1、roure-view 适合大幅度视图切换 2、v-if 适合小幅度组件切换 3、component 动态组件 roure-view 切换视图组件 这个不多说了，之前的文章记录：Vue - route路由跳转 v-if 切换视图组件 这个比较简单，如下： <CommonOne v-if="true" /> <CommonTwo v-el
vue中用动态组件实现选项卡切换效果
12-29
最近在研究vue的路上，那么今天也算个学习笔记吧！ 导航按钮： <p click=a><router to='/collectnewcars'>新车</router></p> <p click=a><router to='/collectusedcars'>二手车</router></p>...
vue学习笔记 学习笔记
05-07
这篇学习笔记主要涵盖了Vue的核心概念，包括组件通信、非父子组件间通信以及路由管理和状态管理。 ### 父子组件通信 #### 1) Props和`$emit` **Props** 是Vue中父组件向子组件传递数据的主要方式。在父组件中定义...
【Vue 自学笔记】动态组件、组件缓存
qq_35712802的博客
08-06 268
切换页面我们可以通过路由去实现，那如果是切换组件呢？使用路由，页面url是会改变的；但是切换组件并不需要url的改变。什么东西可以实现这样的功能呢？——。从名字可知，这是一个可以变化的组件。
vue学习笔记之动态组件和v-once指令简单示例
09-17
动态组件是Vue中的一种机制，允许我们根据应用程序的状态在不同组件之间进行切换。在给出的例子中，我们看到一个简单的`<component>`元素，它的`:is`属性被用来指定要显示的组件。`:is`属性值是一个响应式的数据属性...
vue之组件切换
jiaowolaoliu111的博客
07-15 847
组件切换v-if与v-else，Vue中的页面结构是由不同组件构成的，不同组件可以适合不同页面，适合进行单页应用开发。通过v-if和v-else来判断登录页面。flag的值是布尔类型。当点击登录按钮时则显示登录页面，点击注册按钮时显示注册页面。...
Vue之组件的切换
invalid_oath的博客
03-28 545
一. 使用if和else的组件切换 <div id="app"> <a href="" @click.prevent="flag = true">登录</a> <a href="" @click.prevent="flag = false">注册</a> <login v-if="flag"></login> <register v-else="flag
vue组件切换
hanker的博客
02-13 319
&lt;!DOCTYPE html&gt; &lt;html&gt; &lt;head&gt; &lt;title&gt;&lt;/title&gt; &lt;style&gt; li{ border:1px solid dashed; } li:hover{ background: pink; tr...
Vue实现动态组件的切换
weixin_56296590的博客
11-09 4403
在这里跟大家分享一下如何实现动态组件的切换，举个例子，就比如组件库中的Steps步骤条，我们可能会去实现一个步骤显示一个页面这样的一个功能。 首先我们要了解component组件，他是vue内置的一个组件，提供了一个is属性来动态的渲染组件 <!-- 通过is属性动态切换组件 --> <div class="steps-content"> <compoment :is="pro[current]"></compoment>
如何在Vue中实现动态组件切换？
有我更精彩的博客
05-23 880
在component标签中，我们绑定了一个动态的‘is’属性，根据currentComponent的值来动态切换显示的组件。当用户点击按钮时，页面上的组件会动态切换展示。这种动态组件切换的方式也非常灵活，可以根据具体业务需求动态地展示不同的组件，提升了页面的交互体验。当我们在Vue项目中需要根据用户的操作或其他条件动态地切换组件时，我们可以使用Vue提供的动态组件特性。首先，我们创建一个基本的Vue组件，假设我们有两个组件：ComponentA和ComponentB，我们想要在页面上动态地切换它们。
vue动态组件切换
weixin_53474595的博客
12-28 213
在需要动态切换组件的位置加入，其中currentTabName是当前切换的tab状态。页面里实时计算当前tab状态。
Vue 的组件切换
虔诚带着决然
08-07 4068
Vue 的组件切换的几种方式 方式一： v-if 和 v-else 结合使用实现切换 &amp;lt;!DOCTYPE html&amp;gt; &amp;lt;html lang=&quot;en&quot;&amp;gt; &amp;lt;head&amp;gt; &amp;lt;meta charset=&quot;UTF-8&quot;&amp;gt; &amp;lt;tit
vue中的组件切换
博客的博客
08-18 338
2019年8月18日 使用v-if和v-else进行组件的切换 <div id="app"><a href="" @click.prevent="flag=true">登录</a> <a href="" @click.prevent="flag=false">注册</a> <login v-if="f...
Vue2 组件切换方式
二哈喇子！
04-04 938
Vue2组件切换方式
Vue2.0核心技术笔记：从基础到组件通信与动画
- 在 Vue 中，"active"类可能经常用于组件切换或导航时追踪当前活动的元素。可以通过监听路由变化来动态地添加或移除"active"类，或者使用v-bind动态绑定类名来实现。这通常和组件的生命周期钩子或计算属性结合使用...
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值