使用vue完成注册和登录页面
时间: 2023-10-25 09:16:39 浏览: 37
好的,下面是一个简单的示例代码:
```html
<!-- 注册页面 -->
<template>
<div>
<h1>注册</h1>
<form @submit.prevent="register">
<label>
用户名:
<input type="text" v-model="username" required>
</label>
<br>
<label>
密码:
<input type="password" v-model="password" required>
</label>
<br>
<button type="submit">注册</button>
</form>
</div>
</template>
<script>
export default {
data() {
return {
username: "",
password: ""
};
},
methods: {
register() {
// 发送注册请求
// ...
// 注册成功后跳转到登录页面
this.$router.push("/login");
}
}
};
</script>
<!-- 登录页面 -->
<template>
<div>
<h1>登录</h1>
<form @submit.prevent="login">
<label>
用户名:
<input type="text" v-model="username" required>
</label>
<br>
<label>
密码:
<input type="password" v-model="password" required>
</label>
<br>
<button type="submit">登录</button>
</form>
</div>
</template>
<script>
export default {
data() {
return {
username: "",
password: ""
};
},
methods: {
login() {
// 发送登录请求
// ...
// 登录成功后跳转到主页
this.$router.push("/");
}
}
};
</script>
```
以上代码使用了Vue.js框架,通过`v-model`指令实现了表单数据的双向绑定,使用`@submit.prevent`阻止表单默认提交行为,使用`$router`实现页面跳转。你可以根据自己的需求修改代码,添加相应的样式和校验逻辑。
相关推荐
![pdf](https://img-home.csdnimg.cn/images/20210720083512.png)
![pdf](https://img-home.csdnimg.cn/images/20210720083512.png)
![pdf](https://img-home.csdnimg.cn/images/20210720083512.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)