使用vue完成注册和登录页面
时间: 2023-10-25 19:16:39 浏览: 43
好的,下面是一个简单的示例:
首先,创建一个 `LoginForm.vue` 组件和一个 `RegisterForm.vue` 组件。
`LoginForm.vue` 组件代码:
```vue
<template>
<div>
<h2>登录</h2>
<form @submit.prevent="handleSubmit">
<div>
<label for="email">邮箱</label>
<input type="email" name="email" v-model="email" required />
</div>
<div>
<label for="password">密码</label>
<input type="password" name="password" v-model="password" required />
</div>
<button type="submit">登录</button>
</form>
</div>
</template>
<script>
export default {
data() {
return {
email: "",
password: "",
};
},
methods: {
handleSubmit() {
// 在这里处理登录逻辑
console.log("登录");
},
},
};
</script>
```
`RegisterForm.vue` 组件代码:
```vue
<template>
<div>
<h2>注册</h2>
<form @submit.prevent="handleSubmit">
<div>
<label for="email">邮箱</label>
<input type="email" name="email" v-model="email" required />
</div>
<div>
<label for="password">密码</label>
<input type="password" name="password" v-model="password" required />
</div>
<div>
<label for="confirmPassword">确认密码</label>
<input type="password" name="confirmPassword" v-model="confirmPassword" required />
</div>
<button type="submit">注册</button>
</form>
</div>
</template>
<script>
export default {
data() {
return {
email: "",
password: "",
confirmPassword: "",
};
},
methods: {
handleSubmit() {
// 在这里处理注册逻辑
console.log("注册");
},
},
};
</script>
```
在你的主页面中,你可以像下面这样使用这些组件:
```vue
<template>
<div>
<login-form />
<register-form />
</div>
</template>
<script>
import LoginForm from "@/components/LoginForm.vue";
import RegisterForm from "@/components/RegisterForm.vue";
export default {
components: {
LoginForm,
RegisterForm,
},
};
</script>
```
这只是一个简单的示例,你需要根据你的具体需求进行更改和完善。同时,你还需要在后端实现与前端交互的登录和注册接口。
相关推荐
![zip](https://img-home.csdnimg.cn/images/20210720083736.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)