用vue搭建一个登录注册
时间: 2023-07-04 21:15:26 浏览: 60
好的,下面是一个简单的用 Vue 搭建的登录注册页面:
```html
<template>
<div>
<h2>登录</h2>
<form>
<div>
<label>用户名:</label>
<input type="text" v-model="loginForm.username" />
</div>
<div>
<label>密码:</label>
<input type="password" v-model="loginForm.password" />
</div>
<button type="submit" @click.prevent="login">登录</button>
</form>
<h2>注册</h2>
<form>
<div>
<label>用户名:</label>
<input type="text" v-model="registerForm.username" />
</div>
<div>
<label>密码:</label>
<input type="password" v-model="registerForm.password" />
</div>
<div>
<label>确认密码:</label>
<input type="password" v-model="registerForm.confirmPassword" />
</div>
<button type="submit" @click.prevent="register">注册</button>
</form>
</div>
</template>
<script>
export default {
data() {
return {
loginForm: {
username: '',
password: ''
},
registerForm: {
username: '',
password: '',
confirmPassword: ''
}
}
},
methods: {
login() {
// 发送登录请求
console.log(this.loginForm)
},
register() {
// 发送注册请求
console.log(this.registerForm)
}
}
}
</script>
```
这个页面包含了一个登录表单和一个注册表单,每个表单都有用户名和密码字段,注册表单还有确认密码字段。当用户填写完表单后,点击提交按钮会触发相应的方法,发送登录或注册请求。你可以根据自己的需求,修改表单字段和请求的接口。
相关推荐
![pdf](https://img-home.csdnimg.cn/images/20210720083512.png)
![zip](https://img-home.csdnimg.cn/images/20210720083736.png)
![zip](https://img-home.csdnimg.cn/images/20210720083736.png)
![-](https://csdnimg.cn/download_wenku/file_type_column_c1.png)
![-](https://csdnimg.cn/download_wenku/file_type_column_c1.png)
![-](https://csdnimg.cn/download_wenku/file_type_column_c1.png)
![-](https://csdnimg.cn/download_wenku/file_type_column_c1.png)
![-](https://csdnimg.cn/download_wenku/file_type_column_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)