用vue写一个注册登录界面
时间: 2024-05-13 11:16:37 浏览: 16
好的,下面是一个简单的注册登录界面的示例:
```html
<template>
<div>
<h1>注册</h1>
<form>
<div>
<label for="username">用户名:</label>
<input type="text" id="username" v-model="registerForm.username" />
</div>
<div>
<label for="password">密码:</label>
<input type="password" id="password" v-model="registerForm.password" />
</div>
<div>
<label for="confirmPassword">确认密码:</label>
<input type="password" id="confirmPassword" v-model="registerForm.confirmPassword" />
</div>
<button type="submit" @click.prevent="register">注册</button>
</form>
<hr />
<h1>登录</h1>
<form>
<div>
<label for="username">用户名:</label>
<input type="text" id="username" v-model="loginForm.username" />
</div>
<div>
<label for="password">密码:</label>
<input type="password" id="password" v-model="loginForm.password" />
</div>
<button type="submit" @click.prevent="login">登录</button>
</form>
</div>
</template>
<script>
export default {
data() {
return {
registerForm: {
username: '',
password: '',
confirmPassword: '',
},
loginForm: {
username: '',
password: '',
},
};
},
methods: {
register() {
// 发送注册请求
console.log('注册');
},
login() {
// 发送登录请求
console.log('登录');
},
},
};
</script>
```
这个示例中使用了 `v-model` 指令来双向绑定表单数据,使用了 `@click.prevent` 修饰符来防止表单默认提交行为。具体实现还需要后端接口的支持,这里只是一个简单的前端实现。
相关推荐
![](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)
![zip](https://img-home.csdnimg.cn/images/20210720083736.png)