vue搭建一个登录注册的页面
时间: 2023-06-16 16:07:54 浏览: 56
以下是一个简单的使用 Vue.js 搭建的登录注册页面示例:
```html
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>Login Page</title>
<script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
</head>
<body>
<div id="app">
<h2>Login Page</h2>
<form v-show="isLoginForm" @submit.prevent="login">
<label>Username:</label>
<input type="text" v-model="username">
<br>
<label>Password:</label>
<input type="password" v-model="password">
<br>
<button type="submit">Login</button>
</form>
<form v-show="!isLoginForm" @submit.prevent="register">
<label>Username:</label>
<input type="text" v-model="username">
<br>
<label>Password:</label>
<input type="password" v-model="password">
<br>
<label>Confirm Password:</label>
<input type="password" v-model="confirmPassword">
<br>
<button type="submit">Register</button>
</form>
<p v-show="error">{{ error }}</p>
<p v-show="!isLoginForm">
Already have an account? <button @click="isLoginForm = true">Login</button>
</p>
<p v-show="isLoginForm">
Don't have an account yet? <button @click="isLoginForm = false">Register</button>
</p>
</div>
<script>
new Vue({
el: '#app',
data: {
isLoginForm: true,
username: '',
password: '',
confirmPassword: '',
error: ''
},
methods: {
login() {
// TODO: Implement login logic
console.log('Logging in...');
this.error = '';
},
register() {
// TODO: Implement register logic
console.log('Registering...');
this.error = '';
}
}
});
</script>
</body>
</html>
```
在上面的示例中,我们使用了 Vue.js 来创建一个简单的登录注册页面。我们使用了两个表单来分别处理登录和注册的逻辑。我们使用了 `v-show` 来根据当前的表单是否为登录表单或注册表单来显示对应的表单。我们还使用了 `v-model` 来双向绑定表单中的数据。我们在表单的 `submit` 事件中调用了 `login` 或 `register` 方法来处理登录或注册的逻辑。我们还使用了一个 `error` 变量来记录任何错误的信息,并在页面上显示它。最后,我们使用了两个按钮来切换表单的显示状态。
当然,这只是一个非常简单的示例,你可以根据实际需求添加更多的功能,比如表单验证、后端 API 调用等。