<div id="main" v-cloak>
方法一：只有两个组件切换可以用v-if和v-else
<a href="" @click.prevent="flag=true">登录</a>
<a href="" @click.prevent="flag=false">注册</a>
<login v-if="flag"></login>
<register v-else></register>
方法二：多个组件切换用
<a @click.prevent="com='login'">登录</a>
<a @click.prevent="com='register'">注册</a>
<a @click.prevent="com='register2'">注册2</a>
<component :is="com"></component>
</div>
<script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
<script>
Vue.component('login', {
template: '<h1>登录</h1>'
})
Vue.component('register', {
template: '<h1>注册</h1>'
})
Vue.component('register2', {
template: '<h1>注册2</h1>'
})
var vm = new Vue({
el: '#main',
data: {
msg: 'Hello Vue1',
flag: true,
com: 'login'
}
})
</script>
