vue开发一个登录页面代码实例
时间: 2023-09-26 21:09:50 浏览: 49
当然,下面是一个简单的Vue登录页面的代码实例:
```vue
<template>
<div class="login">
<h2>登录</h2>
<form @submit.prevent="login">
<div class="form-control">
<label for="username">用户名</label>
<input type="text" id="username" v-model="username" required>
</div>
<div class="form-control">
<label for="password">密码</label>
<input type="password" id="password" v-model="password" required>
</div>
<button type="submit">登录</button>
</form>
</div>
</template>
<script>
export default {
data() {
return {
username: '',
password: ''
};
},
methods: {
login() {
// 在这里执行登录逻辑
console.log('用户名:', this.username);
console.log('密码:', this.password);
// 清空表单
this.username = '';
this.password = '';
}
}
};
</script>
<style scoped>
.login {
max-width: 300px;
margin: 0 auto;
}
.form-control {
margin-bottom: 1em;
}
label {
display: block;
}
input[type="text"],
input[type="password"] {
width: 100%;
padding: 0.5em;
}
</style>
```
以上代码创建了一个简单的登录页面,包含了用户名和密码的输入框以及一个登录按钮。当用户点击登录按钮时,会触发`login`方法,在该方法中可以执行登录逻辑。这里只是简单地在控制台输出用户名和密码,并清空表单。
你可以将以上代码保存为一个`.vue`文件,然后在你的Vue项目中使用该组件来展示登录页面。记得在项目中引入该组件并注册。
希望这个例子能帮到你!有其他问题,尽管问我。
相关推荐
![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)