用vue2写一个健身房用户登录界面,
时间: 2024-05-03 19:20:02 浏览: 19
示例代码如下:
```
<template>
<div class="login">
<h1>健身房用户登录</h1>
<form>
<div class="form-group">
<label for="username">用户名:</label>
<input type="text" class="form-control" id="username" v-model="username">
</div>
<div class="form-group">
<label for="password">密码:</label>
<input type="password" class="form-control" id="password" v-model="password">
</div>
<button type="submit" class="btn btn-primary" @click.prevent="login">登录</button>
</form>
</div>
</template>
<script>
export default {
data() {
return {
username: '',
password: ''
}
},
methods: {
login() {
if (this.username === 'admin' && this.password === '123456') {
// 登录成功,跳转到首页
this.$router.push('/home')
} else {
alert('用户名或密码错误')
}
}
}
}
</script>
<style>
.login {
margin: 50px auto;
max-width: 500px;
text-align: center;
}
h1 {
font-size: 36px;
margin-bottom: 30px;
}
.form-group {
margin-bottom: 20px;
text-align: left;
}
label {
display: inline-block;
width: 120px;
font-size: 18px;
}
input[type="text"], input[type="password"] {
display: inline-block;
width: 250px;
font-size: 18px;
padding: 5px;
border: 1px solid #ccc;
border-radius: 5px;
}
button[type="submit"] {
margin-top: 30px;
font-size: 20px;
padding: 10px 20px;
border: none;
border-radius: 5px;
background-color: #007bff;
color: #fff;
cursor: pointer;
}
button[type="submit"]:hover {
background-color: #0069d9;
}
</style>
```
该登录界面包含一个表单,包括用户名和密码两个输入框,以及一个登录按钮。用户输入正确的用户名和密码后,点击登录按钮会触发 `login` 方法,判断用户名和密码是否正确,如果正确则跳转到首页,否则弹出错误提示。在 `data` 函数中定义了用户名和密码两个变量,使用 `v-model` 双向绑定表单输入框的值。使用 `@click.prevent` 修饰符阻止表单默认提交行为。最后,使用了一些简单的 CSS 样式来美化界面。
相关推荐
![zip](https://img-home.csdnimg.cn/images/20210720083736.png)
![zip](https://img-home.csdnimg.cn/images/20210720083736.png)
![doc](https://img-home.csdnimg.cn/images/20210720083327.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)
![docx](https://img-home.csdnimg.cn/images/20210720083331.png)
![zip](https://img-home.csdnimg.cn/images/20210720083736.png)
![zip](https://img-home.csdnimg.cn/images/20210720083736.png)
![zip](https://img-home.csdnimg.cn/images/20210720083736.png)
![zip](https://img-home.csdnimg.cn/images/20210720083736.png)
![zip](https://img-home.csdnimg.cn/images/20210720083736.png)
![zip](https://img-home.csdnimg.cn/images/20210720083736.png)
![zip](https://img-home.csdnimg.cn/images/20210720083736.png)