1 <!DOCTYPE html> 2 <html lang="en"> 3 4 <head> 5 <meta charset="utf-8"> 6 <meta name="viewport" content="width=device-width,initial-scale=1.0"> 7 <meta http-equiv="X-UA-Compatible" content="ie=edge"> 8 <title>Document</title> 9 <!--1.导入Vue的包--> 10 <script src=" https://cdn.jsdelivr.net/npm/vue"></script> 11 <style> 12 .v-enter, 13 .v-leave-to{ 14 opacity: 0; 15 transform: translateX(150px); 16 } 17 18 .v-enter-active, 19 .v-leave-active{ 20 transition: all 0.5s ease; 21 } 22 </style> 23 </head> 24 25 <body> 26 <div id="app"> 27 <a href="" @click.prevent="comName='login'">登录</a> 28 <a href="" @click.prevent="comName='register'">注册</a> 29 <!-- 通过 mode 属性，设置组件切换时候的模式 --> 30 <transition mode="out-in"> 31 <component :is="comName"></component> 32 </transition> 33 34 35 </div> 36 37 <script> 38 //组件名称是 字符串 39 Vue.component('login',{ 40 template:'<h3>登录组件</h3>' 41 }) 42 43 Vue.component('register',{ 44 template:'<h3>注册组件</h3>' 45 }) 46 47 //创建 Vue 实例，得到 ViewModel 48 var vm = new Vue({ 49 el:'#app', 50 data:{ 51 comName:'login'//当前 component 中的 :is 绑定的组件的名称 52 }, 53 methods:{} 54 }); 55 </script> 56 </body> 57 </html>