vue3登录注册页面代码
时间: 2023-10-16 13:11:01 浏览: 38
下面是一个简单的 Vue 3 登录注册页面代码示例:
```
<template>
<div>
<h2>{{ title }}</h2>
<form v-if="showForm" @submit.prevent="handleSubmit">
<div>
<label for="email">Email:</label>
<input type="email" id="email" v-model="email" required>
</div>
<div>
<label for="password">Password:</label>
<input type="password" id="password" v-model="password" required>
</div>
<div v-if="title === 'Sign up'">
<label for="confirmPassword">Confirm Password:</label>
<input type="password" id="confirmPassword" v-model="confirmPassword" required>
</div>
<button type="submit">{{ title }}</button>
</form>
<p v-else>{{ message }}</p>
<button v-if="!showForm" @click="showForm = true">{{ buttonText }}</button>
</div>
</template>
<script>
import { ref } from 'vue';
export default {
name: 'AuthForm',
props: {
isLogin: {
type: Boolean,
required: true
}
},
setup(props) {
const title = ref(props.isLogin ? 'Log in' : 'Sign up');
const buttonText = ref(props.isLogin ? 'Need an account? Sign up' : 'Have an account? Log in');
const showForm = ref(true);
const email = ref('');
const password = ref('');
const confirmPassword = ref('');
const message = ref('');
function handleSubmit() {
if (title.value === 'Log in') {
// handle login
} else {
// handle signup
}
message.value = 'Success!';
showForm.value = false;
}
return {
title,
buttonText,
showForm,
email,
password,
confirmPassword,
message,
handleSubmit
};
}
};
</script>
```
该组件可以通过 `isLogin` 属性来决定是登录页面还是注册页面。在 `setup` 函数中,我们使用了 Vue 3 的 `ref` 函数来创建响应式数据,并且定义了一个 `handleSubmit` 函数来处理表单提交事件。在模板中,我们使用了条件渲染和表单绑定来实现页面的交互效果。