参考代码:
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>组件切换2</title> <style> .v-enter, .v-leave-to{ opacity: 0; transform: translateX(30px); } .v-enter-active, .v-leave-active{ position:absolute; transition: all 0.5s ease; } </style> </head> <body> <div id="app"> <a href="" @click.prevent="comName='login'">登录</a> <a href="" @click.prevent="comName='register'">注册</a> <transition mode="out-in"> <component :is="comName"></component> </transition> </div> <script src="../js/vue.js"></script> <script id="tmp1" type="x-template"> <div> <h3>登录</h3> </div> </script> <script> Vue.component('login',{ template:'#tmp1' }); Vue.component('register',{ template:'<h3>注册</h3>' }); const app = new Vue({ el: '#app', data:{ comName:'login' } }); </script> </body> </html>