使用<component :is=' comName ' ></component> 标签实现组件切换
:is=' comName ' -------> 占位符
使用transition 标签 加 mode=' out-in ' 属性实现有序的动画效果
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<style>
<!--动画样式-->
.v-enter,
.v-leave-to{
opacity:0;
transform: translateX(100px);
}
.v-enter-active,
.v-leave-active{
transition:all 0.8s;
}
</style>
</head>
<body>
<div class="app">
<!--点击登录设置comName占位符的值为login-->
<a href="" @click.prevent="comName='login'">登录</a>
<!--点击登录设置comName占位符的值为register-->
<a href="" @click.prevent="comName='register'">注册</a>
<!--使用transition包裹住component标签，设置样式；mode='out-in'属性实现有序的动画-->
<transition mode="out-in">
<component :is="comName"></component>
</transition>
</div>
<script src="../lib/vue-2.4.0.js"></script>
<script>
Vue.component('login',{
template:'<h1>登录界面</h1>'
});
Vue.component('register',{
template:'<h1>注册界面</h1>'
});
var vm = new Vue({
el:'.app',
data:{
comName:'login' /*默认为登录页面*/
}
})
</script>
</body>
</html>