vue3实现登录注册页面
时间: 2024-04-25 20:20:05 浏览: 12
Vue 3是一种流行的JavaScript框架,用于构建用户界面。下面是一个简单的示例,展示了如何使用Vue 3来实现登录注册页面:
首先,你需要安装Vue 3。可以通过以下命令使用npm进行安装:
```
npm install vue@next
```
然后,在你的HTML文件中引入Vue库:
```html
<script src="https://unpkg.com/vue@next"></script>
```
接下来,创建一个Vue实例,并定义登录和注册组件:
```html
<div id="app">
<login v-if="currentTab === 'login'" @switch-tab="switchTab"></login>
<register v-else @switch-tab="switchTab"></register>
</div>
<script>
const app = Vue.createApp({
data() {
return {
currentTab: 'login'
}
},
methods: {
switchTab(tab) {
this.currentTab = tab;
}
}
});
app.component('login', {
template: `
<div>
<h2>Login</h2>
<!-- 登录表单 -->
<button @click="$emit('switch-tab', 'register')">Switch to Register</button>
</div>
`
});
app.component('register', {
template: `
<div>
<h2>Register</h2>
<!-- 注册表单 -->
<button @click="$emit('switch-tab', 'login')">Switch to Login</button>
</div>
`
});
app.mount('#app');
</script>
```
在上面的代码中,我们创建了一个Vue实例,并定义了两个组件:`login`和`register`。根据`currentTab`的值,决定显示哪个组件。通过点击按钮,可以在登录和注册之间切换。
这只是一个简单的示例,你可以根据自己的需求进行扩展和修改。