用vue3写一个注册页面
时间: 2024-03-09 16:21:43 浏览: 10
好的,下面是一个简单的注册页面,使用Vue 3和Bootstrap 4进行开发:
```html
<template>
<div class="container mt-5">
<div class="row justify-content-center">
<div class="col-md-6">
<form @submit.prevent="registerUser">
<h3 class="mb-3">注册</h3>
<div class="form-group">
<label for="username">用户名</label>
<input type="text" class="form-control" id="username" v-model="username" required>
</div>
<div class="form-group">
<label for="email">邮箱</label>
<input type="email" class="form-control" id="email" v-model="email" required>
</div>
<div class="form-group">
<label for="password">密码</label>
<input type="password" class="form-control" id="password" v-model="password" required>
</div>
<div class="form-group">
<label for="confirmPassword">确认密码</label>
<input type="password" class="form-control" id="confirmPassword" v-model="confirmPassword" required>
</div>
<button type="submit" class="btn btn-primary">注册</button>
</form>
</div>
</div>
</div>
</template>
<script>
import { ref } from 'vue';
export default {
setup() {
const username = ref('');
const email = ref('');
const password = ref('');
const confirmPassword = ref('');
const registerUser = () => {
// 处理注册逻辑
console.log({ username: username.value, email: email.value, password: password.value, confirmPassword: confirmPassword.value });
};
return {
username,
email,
password,
confirmPassword,
registerUser,
};
},
};
</script>
```
在这个注册页面中,我们使用了Bootstrap 4的表单样式,并使用Vue 3的Composition API进行开发。我们定义了4个ref变量来保存用户输入的用户名、邮箱、密码和确认密码,然后在表单的submit事件中调用`registerUser`方法进行注册逻辑处理。在这个例子中,我们只是简单地使用`console.log`来输出用户的输入,实际应用中需要根据具体业务需求进行处理。