帮我用vue写一个登录界面页面,包含用户名、密码、验证码
时间: 2024-06-10 13:05:28 浏览: 11
好的,我可以为您提供有关Vue的登录界面页面的代码示例。以下是一个简单的Vue登录页面示例,包括用户名、密码和验证码输入框,和一个登录按钮。
``` html
<template>
<div class="login-panel">
<h3>登录系统</h3>
<form>
<div class="form-group">
<label>用户名</label>
<input type="text" v-model="username" placeholder="请输入用户名">
</div>
<div class="form-group">
<label>密码</label>
<input type="password" v-model="password" placeholder="请输入密码">
</div>
<div class="form-group">
<label>验证码</label>
<input type="text" v-model="verifyCode" placeholder="请输入验证码">
<img v-bind:src="verifyCodeImg" v-on:click="refreshVerifyCode">
</div>
<button type="submit" v-on:click.prevent="login">登录</button>
</form>
</div>
</template>
<script>
export default {
data() {
return {
username: '',
password: '',
verifyCode: '',
verifyCodeImg: ''
};
},
mounted() {
this.refreshVerifyCode();
},
methods: {
refreshVerifyCode() {
// 随机生成验证码并获取验证码图片
this.verifyCodeImg = 'http://example.com/verifyCode?rand=' + Math.random();
},
login() {
// 向服务器发送登录请求,处理登录结果,并跳转到主页面
}
}
};
</script>
<style>
.login-panel {
width: 400px;
margin: 50px auto;
padding: 30px;
border: 1px solid #ccc;
box-shadow: 0 0 10px #ccc;
border-radius: 5px;
}
.form-group {
margin-bottom: 20px;
}
label {
display: block;
margin-bottom: 5px;
}
input {
display: block;
width: 100%;
padding: 6px 10px;
font-size: 14px;
border: 1px solid #ccc;
border-radius: 5px;
}
img {
margin-left: 10px;
vertical-align: middle;
cursor: pointer;
}
button {
display: block;
width: 100%;
padding: 10px;
font-size: 16px;
background-color: #009688;
color: #fff;
border: none;
border-radius: 5px;
cursor: pointer;
transition: background-color 0.3s ease;
}
button:hover {
background-color: #00796b;
}
</style>
```
在这个代码示例中,我们使用`v-model`指令双向绑定用户名、密码、验证码输入框的值,以便可以轻松获取客户端输入的内容。验证码输入框旁边有一个验证码图片,可以通过点击图片刷新验证码。登录按钮上有一个`v-on:click.prevent`指令,防止页面刷新并触发默认的表单提交行为。
当用户点击登录按钮时,可以向服务器发送登录请求,处理登录结果,并根据结果跳转到主页面。此处省略服务器交互部分的代码实现。
希望这个示例能够对你有所帮助,如有任何疑问,请随时联系我。
相关推荐
![pdf](https://img-home.csdnimg.cn/images/20210720083512.png)
![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)