vue登录注册页面代码
时间: 2023-08-15 10:08:51 浏览: 105
下面是一个简单的Vue登录注册页面的示例代码:
```vue
<template>
<div>
<h2>登录</h2>
<form @submit.prevent="login">
<label>用户名</label>
<input type="text" v-model="username" required>
<label>密码</label>
<input type="password" v-model="password" required>
<button type="submit">登录</button>
</form>
<h2>注册</h2>
<form @submit.prevent="register">
<label>用户名</label>
<input type="text" v-model="newUsername" required>
<label>密码</label>
<input type="password" v-model="newPassword" required>
<button type="submit">注册</button>
</form>
</div>
</template>
<script>
export default {
data() {
return {
username: '',
password: '',
newUsername: '',
newPassword: ''
}
},
methods: {
login() {
// 调用登录API
},
register() {
// 调用注册API
}
}
};
</script>
```
上面的代码中包含了一个登录表单和一个注册表单。每个表单都有一个用户名和密码输入框以及一个提交按钮。当用户提交表单时,Vue会调用相应的方法来处理登录或注册请求。在这个示例中,这些方法只是占位符,你需要根据自己的需求实现它们。
同时,你还需要在Vue实例中添加路由和API调用等相关代码。