用vue写一个带验证码的登录页面
时间: 2024-05-29 18:03:25 浏览: 8
好的,以下是一个简单的带验证码的登录页面:
```
<template>
<div>
<h1>Login</h1>
<form>
<div>
<label for="username">Username:</label>
<input type="text" id="username" v-model="username" />
</div>
<div>
<label for="password">Password:</label>
<input type="password" id="password" v-model="password" />
</div>
<div>
<label for="captcha">Captcha:</label>
<input type="text" id="captcha" v-model="captcha" />
<img :src="captchaImg" @click="refreshCaptcha" />
</div>
<button type="submit" @click.prevent="login">Login</button>
</form>
</div>
</template>
<script>
export default {
data() {
return {
username: "",
password: "",
captcha: "",
captchaImg: ""
};
},
mounted() {
this.refreshCaptcha();
},
methods: {
refreshCaptcha() {
// 生成新的验证码图片
this.captchaImg = "https://www.example.com/captcha?" + Date.now();
},
login() {
// 发送登录请求
// ...
}
}
};
</script>
```
在这个示例中,我们使用了一个 `captchaImg` 属性来存储验证码图片的 URL,当用户点击验证码图片时,会调用 `refreshCaptcha` 方法重新生成验证码图片并更新 `captchaImg` 的值。当用户提交表单时,会调用 `login` 方法发送登录请求,你需要在 `login` 方法中编写发送登录请求的逻辑。