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

浅浅的花香味﹌ 2021-10-19 07:12 404阅读 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">
    			
    			<a href="" @click.prevent="name='login'">登录</a>
    			<a href="" @click.prevent="name='register'">注册</a>
    			
    			
    			<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>

发表评论取消回复

表情：

评论列表（有 0 条评论，404人围观）

还没有评论，来说两句吧...

相关阅读

相关 Vue过渡动画，组件动画，元素动画（vue2元素、组件过渡动画）

在 CSS 中，你需要定义以 name 属性值为前缀的六个类名来控制过渡的不同阶段。例如，如果 name="fade"，则需要定义以下类：.fade-enter-acti...

ゝ一纸荒年。/ 2024年04月22日 22:30/ 0 赞/ 23 阅读

相关 vue component :is实现多个组件之间的切换（动画版）

下面展示一些 `component :is`。 <!DOCTYPE html> <html> <head> <meta charset=

左手的ㄟ右手/ 2022年12月22日 00:58/ 0 赞/ 156 阅读

相关 vue 组件（component、components）

<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8">

分手后的思念是犯贱/ 2022年12月12日 15:07/ 0 赞/ 163 阅读

相关 vue components组件

组件组件系统是 Vue 的另一个重要概念，因为它是一种抽象，允许我们使用小型、独立和通常可复用的组件构建大型应用。组件是可复用的 Vue 实例。 1.局部注册

约定不等于承诺〃/ 2022年11月29日 12:23/ 0 赞/ 165 阅读

相关 vue2路由组件切换动画

[参考文章][Link 1] 1.在路由对象的原型中添加一个方法和一个属性 Router.prototype.goBack = function () {

快来打我*/ 2022年05月31日 01:40/ 0 赞/ 425 阅读

相关 Vue中组件的切换

文章目录示例源码结果分析此处的组件切换使用的是`Vue`中的`component`组件中的`is`属性来实现

小鱼儿/ 2022年04月22日 10:52/ 0 赞/ 257 阅读

相关 Vue.js组件实现选项卡以及切换动画特效

Vue.js组件实现选项卡以及切换动画特效最近在学习Vue，当看梁灏大神写的《Vue.js实战》时看到了关于用组件实现选项卡功能，我也根据课后的练习加上自己的理解重新编

以你之姓@/ 2022年03月21日 05:38/ 0 赞/ 293 阅读

相关 Vue.js 组件切换的方式

文章目录使用\`flag\`标识符结合\`v-if\`和\`v-else\`切换组件使用\`:is\`属性来切换不同的子组件

素颜马尾好姑娘i/ 2022年03月17日 14:14/ 0 赞/ 168 阅读

相关第六章组件 59 组件切换-使用Vue提供的component元素实现组件切换

1 <!DOCTYPE html> 2 <html lang="en"> 3 4 <head> 5 <met

约定不等于承诺〃/ 2021年11月04日 11:40/ 0 赞/ 261 阅读

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

<!DOCTYPE html> <html> <head> <meta charset="utf-8"> <title>动画实

浅浅的花香味﹌/ 2021年10月19日 07:12/ 0 赞/ 405 阅读