用vue3 写一个用户注册的页面
时间: 2024-02-04 20:39:23 浏览: 14
好的,以下是一个简单的用户注册页面的 Vue 3 代码示例:
```vue
<template>
<div>
<h1>用户注册</h1>
<form @submit.prevent="submitForm">
<div>
<label for="username">用户名:</label>
<input type="text" id="username" v-model="username" required />
</div>
<div>
<label for="email">邮箱:</label>
<input type="email" id="email" v-model="email" required />
</div>
<div>
<label for="password">密码:</label>
<input type="password" id="password" v-model="password" required />
</div>
<button type="submit">注册</button>
</form>
</div>
</template>
<script>
import { ref } from 'vue';
export default {
setup() {
const username = ref('');
const email = ref('');
const password = ref('');
const submitForm = () => {
// 将表单数据提交到服务器,省略实现
console.log(`提交表单数据:username=${username.value}, email=${email.value}, password=${password.value}`);
};
return {
username,
email,
password,
submitForm,
};
},
};
</script>
```
这个示例包含一个 `form` 表单,其中包含三个输入框(用户名、邮箱、密码)和一个提交按钮。当用户点击提交按钮时,`submitForm` 方法将被调用,可以在这个方法中将表单数据提交到服务器。
在 `setup` 函数中,我们使用 Vue 3 提供的 `ref` 函数创建了三个响应式变量 `username`、`email` 和 `password`,用于存储用户输入的表单数据。同时,在 `setup` 函数中定义了 `submitForm` 方法,用于处理表单提交事件。最后,在 `return` 语句中将 `username`、`email`、`password` 和 `submitForm` 方法暴露给模板使用。