1 <!DOCTYPE html> 2 <html lang="en"> 3 <head> 4 <meta charset="UTF-8"> 5 <title>Title</title> 6 <script src="../lib/js/vue.js"></script> 7 <style> 8 .v-enter, 9 .v-leave-to{ 10 opacity: 0; 11 transform: translateX(200px); 12 } 13 .v-enter-active, 14 .v-leave-active{ 15 transition: all 0.7s linear; 16 } 17 </style> 18 </head> 19 <body> 20 <div id="app"> 21 <a href="" @click.prevent="comName='login'">登录</a> 22 <a href="" @click.prevent="comName='register'">注册</a> 23 24 <!-- 通过mode 属性，设置组件切换时候的模式 --> 25 <transition mode="out-in"> 26 <component :is="comName"></component> 27 </transition> 28 </div> 29 <script> 30 Vue.component('login',{ 31 template:'<h3>登录组件</h3>' 32 }); 33 Vue.component('register',{ 34 template:'<h3>注册组件</h3>' 35 }); 36 const vm = new Vue({ 37 el:'#app', 38 data:{ 39 comName:'login'//当前component 中的 :is 绑定的组件的名称 40 }, 41 methods:{} 42 }) 43 </script> 44 </body> 45 </html>