前端vue实现电商登录注册页
时间: 2023-08-08 20:13:36 浏览: 54
好的,下面是一个简单的前端vue实现电商登录注册页的示例代码:
```
<template>
<div>
<form>
<h2>登录</h2>
<div>
<label for="username">用户名:</label>
<input type="text" id="username" v-model="username">
</div>
<div>
<label for="password">密码:</label>
<input type="password" id="password" v-model="password">
</div>
<button type="submit" @click.prevent="login">登录</button>
</form>
<form>
<h2>注册</h2>
<div>
<label for="new-username">用户名:</label>
<input type="text" id="new-username" v-model="newUsername">
</div>
<div>
<label for="new-password">密码:</label>
<input type="password" id="new-password" v-model="newPassword">
</div>
<div>
<label for="confirm-password">确认密码:</label>
<input type="password" id="confirm-password" v-model="confirmPassword">
</div>
<button type="submit" @click.prevent="register">注册</button>
</form>
</div>
</template>
<script>
export default {
data() {
return {
username: '',
password: '',
newUsername: '',
newPassword: '',
confirmPassword: ''
}
},
methods: {
login() {
// 发送登录请求
},
register() {
if (this.newPassword !== this.confirmPassword) {
alert('两次输入的密码不一致')
return
}
// 发送注册请求
}
}
}
</script>
```
上面的代码中,我们用了两个 `form` 标签分别实现登录和注册功能。使用了 `v-model` 指令将输入框的值与组件的数据进行双向绑定,当用户点击登录或注册按钮时,会触发相应的方法,我们可以在这些方法中发送登录和注册请求。同时,在注册表单中,我们添加了一个确认密码的输入框,用来确保用户输入的密码无误。
相关推荐
![zip](https://img-home.csdnimg.cn/images/20210720083736.png)
![zip](https://img-home.csdnimg.cn/images/20210720083736.png)
![rar](https://img-home.csdnimg.cn/images/20210720083606.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)
![](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)