<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <meta http-equiv="X-UA-Compatible" content="ie=edge"> <title>Document</title> <script src="./lib/vue-2.4.0.js"></script> <style> .v-enter, .v-leave-to { opacity: 0; transform: translateX(150px); } .v-enter-active, .v-leave-active { transition: all 0.5s ease; } </style> </head> <body> <div id="app"> <a href="" @click.prevent="comName='login'">登录</a> < A the href = "" @ click.prevent = "comName = 'Register'" > Register </ A > <-! Through mode attribute is provided when the mode switching assembly -> < Transition mode = "OUT-in" > < component : iS = "comName" > </ component > </ Transition > </ div > < Script > // component name string Vue.component ( ' Login ' , { Template:' <H3> Log assembly </ H3> ' }) Vue.component ( ' Register ' , { Template: ' <H3> register component </ H3> ' }) // Create Vue instance, to give the ViewModel var VM = new new Vue ({ EL: ' #app ' , Data: { comName: ' Login ' // current component in the: name of the component is bound }, Methods: {} }); </ Script > </ body > </ HTML >