一、使用v-if和v-else实现组件切换
使用v-if和v-else实现切换登陆组件和注册组件页面。
<html>
<head>
<meta charset="utf-8">
<title></title>
<script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
</head>
<body>
<div id='app'>
<a href="" @click.prevent="flag=true">登陆</a>
<a href="" @click.prevent="flag=false">注册</a>
<sign v-if="flag"></sign>
<register v-else="flag"></register>
</div>
<template id="templ1">
<h2>登陆组件页面</h2>
</template>
<template id="templ2">
<h2>注册组件页面</h2>
</template>
<script>
Vue.component('sign', {
template: '#templ1',
});
Vue.component('register', {
template: '#templ2',
});
var vm = new Vue({
el: "#app",
data: {
flag: true
}
});
</script>
</body>
</html>
虽然这样可以实现，但这只适用于两个组件的切换，flag就分true或false，如果要实现3个以上组件的切换就会遇到问题。
二、使用component标签实现组件切换
Vue提供了component标签来展示对应组件。
使用v-bind绑定它的is属性，用来指定要展示的组件名称。
<html>
<head>
<meta charset="utf-8">
<title></title>
<script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
</head>
<body>
<div id='app'>
<a href="" @click.prevent="templName='sign'">登陆</a>
<a href="" @click.prevent="templName='register'">注册</a>
<component :is="templName"></component>
</div>
<template id="templ1">
<h2>登陆组件页面</h2>
</template>
<template id="templ2">
<h2>注册组件页面</h2>
</template>
<script>
Vue.component('sign', {
template: '#templ1',
});
Vue.component('register', {
template: '#templ2',
});
var vm = new Vue({
el: "#app",
data: {
templName: 'sign'
}
});
</script>
</body>
</html>
网友评论