实现3个组件的切换,默认是登录组件,当点击其他组件时,显示其他组件。组件样式为:style=“width:300px;height:200px;border:1pxsolid red;text-align:center”
时间: 2024-02-24 17:56:37 浏览: 20
好的,以下是一个简单的示例程序:
```html
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>组件切换示例</title>
<style>
.container {
width: 300px;
height: 200px;
border: 1px solid red;
text-align: center;
display: flex;
justify-content: center;
align-items: center;
}
</style>
</head>
<body>
<div id="app">
<div class="container" v-if="currentComponent === 'login'">
<h1>登录组件</h1>
<button @click="currentComponent = 'register'">注册</button>
<button @click="currentComponent = 'forgot'">忘记密码</button>
</div>
<div class="container" v-else-if="currentComponent === 'register'">
<h1>注册组件</h1>
<button @click="currentComponent = 'login'">返回登录</button>
<button @click="currentComponent = 'forgot'">忘记密码</button>
</div>
<div class="container" v-else-if="currentComponent === 'forgot'">
<h1>忘记密码组件</h1>
<button @click="currentComponent = 'login'">返回登录</button>
<button @click="currentComponent = 'register'">注册</button>
</div>
</div>
<script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
<script>
new Vue({
el: '#app',
data: {
currentComponent: 'login'
}
})
</script>
</body>
</html>
```
这个程序创建了一个 Vue 实例,并在 HTML 中定义了三个容器组件,分别代表登录、注册、忘记密码三个组件。当 `currentComponent` 变量的值发生变化时,会根据其值的不同来显示不同的组件,从而实现了组件的切换。在每个组件中,我们都设置了两个按钮,当点击这些按钮时,会改变 `currentComponent` 变量的值,从而触发组件的切换。其中,`.container` 类的样式设置了容器组件的宽高、边框和文本居中等样式。