vue3 点击更换验证码图片以及登录不成功后更换验证码

最新推荐文章于 2023-12-28 09:00:00 发布

Mr.A.D.0013

最新推荐文章于 2023-12-28 09:00:00 发布

阅读量1.5k

点赞数 2

文章标签：前端

本文链接：https://blog.csdn.net/bannerparter/article/details/126280347

版权

这是基于后端已经生成验证码的情况。

首先点击更换验证码

const imgUrl = ref('你的验证码地址');

先将验证码地址给存起来，方便后续操作

然后是点击验证码更换，dom元素上的写法

<img :src="imgUrl" alt="验证码" class="picture" @click="changeCaptcha($event)">

然后是函数进行更换

 // 更换验证码
        const changeCaptcha = (event) => {
            event.target.src = `${imgUrl.value}?time=${new Date().getTime()}`;
        };

当登录失败自动时更换验证码

document.getElementsByTagName('img')[1].src = `${imgUrl.value}?time=${new Date().getTime()}`

加上时间戳即可！

（PS:必须加时间戳或者后面随机拼接随机数或者字符串）

关注