这里，我用一个注册登录两组件的切换实例来演示：
切换方式一
<!DOCTYPEhtml>
<htmllang="zh-CN">
<head>
<metacharset="UTF-8"/>
<title>独秀不爱秀</title>
</head>
<body>
<divid="app">
<ahref="#"@click.prevent="flag=true">登录</a>
<ahref="#"@click.prevent="flag=false">注册</a>
<!--默认显示登录组件-->
<loginv-if="flag"></login>
<registerv-else="flag"></register>
</div>
<scriptsrc="./lib/vue-2.4.0.js"></script>
<scripttype="text/javascript">
Vue.component('login',{
template:'<h3>登录组件</h3>'
});
Vue.component('register',{
template:'<h3>注册组件</h3>'
});
constvm=newVue({
el:'#app',
data:{
flag:true
},
});
</script>
</body>
</html>
这个方式唯一的缺陷就是只能在两个组件之前切换，当要求需要三个及三个以上的组件切换的时候，这就不行了(原因是flag只有true和false两个值)，这就要要使用方式二了。
切换方式二
这里，我们需要学到一个Vue官方提供的元素component。
<!DOCTYPEhtml>
<htmllang="zh-CN">
<head>
<metacharset="UTF-8"/>
<title>独秀不爱秀</title>
</head>
<body>
<divid="app">
<ahref="#"@click.prevent="comName='login'">登录</a>
<ahref="#"@click.prevent="comName='register'">注册</a>
<!--
Vue提供的component来展示对应名称的组件
component是一个占位符
:is属性指定组件名称
-->
<component:is="comName"></component>
</div>
<scriptsrc="./lib/vue-2.4.0.js"></script>
<scripttype="text/javascript">
//组件名称是字符串
Vue.component('login',{
template:'<h3>登录组件</h3>'
});
Vue.component('register',{
template:'<h3>注册组件</h3>'
});
constvm=newVue({
el:'#app',
data:{
comName:'login'//当前component中的:is绑定的组件名称
},
});
</script>
</body>
</html>
现在，我们在添加一个退出组件（这是为了证明第二种组件切换方式的好处）
<!DOCTYPEhtml>
<htmllang="zh-CN">
<head>
<metacharset="UTF-8"/>
<title>独秀不爱秀</title>
</head>
<body>
<divid="app">
<ahref="#"@click.prevent="comName='login'">登录</a>
<ahref="#"@click.prevent="comName='register'">注册</a>
<ahref="#"@click.prevent="comName='out'">退出</a>
<!--
Vue提供的component来展示对应名称的组件
component是一个占位符
:is属性指定组件名称
-->
<component:is="comName"></component>
</div>
<scriptsrc="./lib/vue-2.4.0.js"></script>
<scripttype="text/javascript">
//组件名称是字符串
Vue.component('login',{
template:'<h3>登录组件</h3>'
});
Vue.component('register',{
template:'<h3>注册组件</h3>'
});
Vue.component('out',{
template:'<h3>退出组件</h3>'
});
constvm=newVue({
el:'#app',
data:{
//默认显示登录组件
comName:'login'//当前component中的:is绑定的组件名称
},
});
</script>
</body>
</html>
切换成功。
如果您觉得本文的内容对您的学习有所帮助：
关键字：
html