vue中的组件切换和切换时的动画_vue element 子组件切换显示增加动画效果流畅-优快云博客

本文链接：https://blog.youkuaiyun.com/qq_41379824/article/details/109578906

本文介绍了在Vue中实现组件切换的两种方法，并详细讲解了如何在切换过程中添加动画效果，提升用户体验。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

1.第一种切换方式

Vue.component('login',{
	template:'<h1>登录组件</h1>'
})
Vue.component('register',{
	template:'<h1>注册组件</h1>'
})
var vm =new Vue({
	el:'#app',
	data:{
		flag:true
}
})

<div id="app">
	<input type="button" value="登录" @click="flag=true">
	<input type="button" value="注册" @click="flag=false">
	<login v-if="flag"></login>
	<register v-else></register>
</div>

2.第二种切换方式

Vue.component('login',{
	template:'<h1>登录组件</h1>'
})
Vue.component('register',{
	template:'<h1>注册组件</h1>'
})
var vm =new Vue({
	el:'#app',
	data:{
		mycom:''
}
})

<div id="app">
	<input type="button" value="登录" @click="mycom='login'">
	<input type="button" value="注册" @click="mycom='register'">
	<component :is="mycom"></component>
</div>

3.切换动画

<style>
	.v-enter,.v-leave-to{
		opacity:0;
		transform:translateX(150px);
	}
	.v-enter-active,.v-enter-active{
		transition:all 0.4s ease;
	}
</style>
<div id="app">
	<input type="button" value="登录" @click="mycom='login'">
	<input type="button" value="注册" @click="mycom='register'">
	<transition mode="out-in">
		<component :is="mycom"></component>
	</transition>
</div>