使用<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>