<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><meta name="viewport" content="width=device-width, initial-scale=1.0"><title>Document</title><script src="vue.js"></script><style>.v-enter-active,.v-leave-active{transition:all .5s;}.v-enter,.v-leave-to{opacity: 0;}</style></head>
<body><div id="app"><button @click="compName='l-c'">登录</button><button @click="compName='r-c'">注册</button><transition mode="out-in"><component :is="compName"></component></transition></div><template id="login">
<div>登录页</div></template><template id="regist">
<div>注册页</div></template><script>new Vue({el:"#app",data:{compName:"l-c"},components:{"l-c":{template:"#login"},"r-c":{template:"regist"}}})</script>
</body>
</html>效果
