vue3注册和登录页面
时间: 2023-09-14 09:11:34 浏览: 141
以下是一个简单的 Vue 3 注册和登录页面的示例代码:
```html
<template>
<div>
<h2>注册</h2>
<form @submit.prevent="register">
<div>
<label for="username">用户名:</label>
<input type="text" id="username" v-model="registerData.username" required>
</div>
<div>
<label for="password">密码:</label>
<input type="password" id="password" v-model="registerData.password" required>
</div>
<button type="submit">注册</button>
</form>
<hr>
<h2>登录</h2>
<form @submit.prevent="login">
<div>
<label for="username">用户名:</label>
<input type="text" id="username" v-model="loginData.username" required>
</div>
<div>
<label for="password">密码:</label>
<input type="password" id="password" v-model="loginData.password" required>
</div>
<button type="submit">登录</button>
</form>
</div>
</template>
<script>
export default {
data() {
return {
registerData: {
username: '',
password: ''
},
loginData: {
username: '',
password: ''
}
}
},
methods: {
register() {
// 发送注册请求
console.log('注册成功')
},
login() {
// 发送登录请求
console.log('登录成功')
}
}
}
</script>
```
在这个示例中,我们使用了两个表单来进行注册和登录。在 `data` 中定义了两个数据对象 `registerData` 和 `loginData` 来分别存储注册和登录表单中的数据。使用了 `v-model` 将输入框的值与数据对象中的对应属性绑定起来。使用了 `@submit.prevent` 阻止表单默认提交事件,并且在提交时调用对应的方法进行注册和登录操作。在这个示例中,我们只是简单地在控制台中输出了成功信息,实际上需要将数据发送给后端进行验证和处理。