Vue组件切换和动画，使用Vue提供的component元素实现组件切换

最新推荐文章于 2024-04-10 10:39:20 发布

haoqi好奇

最新推荐文章于 2024-04-10 10:39:20 发布

阅读量442

点赞数

分类专栏：案例 Vue 前端

本文链接：https://blog.csdn.net/qq_41956789/article/details/99709877

版权

前端同时被 3 个专栏收录

45 篇文章 1 订阅

订阅专栏

Vue

29 篇文章 2 订阅

订阅专栏

案例

26 篇文章 0 订阅

订阅专栏

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title>动画实现组件切换</title>
		<script src="lib/vue.min.js"></script>
		<style type="text/css">
			/* 动画的样式 */
			.v-enter,
			.v-leave-to{
				opacity: 0;
				transform: translateX(150px);
			}
			.v-enter-active,
			.v-leave-active{
				opacity: 1;
				transition: all 0.8s ease; 
			}
		</style>
	</head>
	<body>
		<div id="app">
			<!-- 动态改变name,阻止a链接默认行为，使得引用组件名 -->
			<a href="" @click.prevent="name='login'">登录</a>
			<a href="" @click.prevent="name='register'">注册</a>
			<!-- 设置一个待切换的组件名 -->
			<!-- 做一个切换的动画 modeout-in让动画效果先出去再进来-->
			<transition mode="out-in">
				<component :is="name"></component>
			</transition>
		</div>
		<script>
			// 登录的全局组件
			Vue.component('login',{
				template:'<h3>登录</h3>'
			})
			// 注册的全局组件
			Vue.component('register',{
				template:'<h3>注册</h3>'
			})
			var app=new Vue({
				el:'#app',
				data:{
					// 默认为login组件
					name:'login'
				},
				methods:{
					
				}
			})
		</script>
	</body>
</html>

haoqi好奇

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
Vue组件切换和动画，使用Vue提供的component元素实现组件切换

<!DOCTYPE html><html> <head> <meta charset="utf-8"> <title>动画实现组件切换</title> <script src="lib/vue.min.js"></script> <style type="text/css"&...
复制链接

扫一扫