一，使用v-if和v-else指令
1，定义注册和登陆组件，设置flag标识，默认为true
<script> Vue.component('login', { template: '#tmp1' }) Vue.component('register', { template: '#tmp2' }) var vm = new Vue({ el: '#app', data: { flag: true } }) </script>
2，在组件中使用v-if，点击按钮的使用切换flag的值
<body> <div id="app"> <a href="#" @click="flag=true">登陆</a> <a href="#" @click="flag=false">注册</a> <br/> <login v-if="flag"></login> <register v-else="flag"></register> </div> <template id="tmp1"> <div> <h3>登陆</h3> </div> </template> <template id="tmp2"> <div> <h3>注册</h3> </div> </template> </body>
3，结果
二，使用component标签
这种方式可以根据给定component组件中comName来切换多个组件
1，定义注册和登陆组件
//组件名称是字符串
Vue.component('login', {
template: '#tmp1'
})
Vue.component('register', {
template: '#tmp2'
})
2，Vue提供了component来展示对应名称的组件
<div id="app"> <a href="" @click.prevent="comName='login'">登陆</a> <a href="" @click.prevent="comName='register'">注册</a>
<!--component是一个占位符 :is属性可以用来指定要展示的组件名称--> <component :is="comName"></component> </div>
3，默认给component中绑定组件名称
//创建Vue实例 得到ViewModel
var vm = new Vue({
el: '#app',
data: {
// 当前component中的:is绑定的组件的名称
comName: 'login'
}
})
4，整体代码段
<body> <div id="app"> <a href="" @click.prevent="comName='login'">登陆</a> <a href="" @click.prevent="comName='register'">注册</a> <!--Vue提供了component来展示对应名称的组件 component是一个占位符 :is属性可以用来指定要展示的组件名称--> <component :is="comName"></component> </div> <template id="tmp1"> <div> <h3>登陆</h3> </div> </template> <template id="tmp2"> <div> <h3>注册</h3> </div> </template> <script> //组件名称是字符串 Vue.component('login', { template: '#tmp1' }) Vue.component('register', { template: '#tmp2' }) //创建Vue实例 得到ViewModel var vm = new Vue({ el: '#app', data: { // 当前component中的:is绑定的组件的名称 comName: 'login' } }) </script> </body>
5，易出问题代码段
注意：组件名称是字符串，如果写成这种形式，:is涉及到属性绑定，=后面会被当成一个表达式来解析，没有当成字符串
<component :is="login"></component>
因此，需要把login改成字符串
<component :is="'login'"></component>