vue 如何实现点击动态更新图形验证码

怼烎@ 2023-07-24 14:41 1阅读 0赞

#### 一、vue 点击动态更新图形验证码 ####

1.  在验证码的图片上，绑定点击事件 `getCaptcha()`，同时使用 `ref` 指明图形验证码的引用对象，代码如下所示：

<section class="login_message">
      <input type="text" maxlength="11" placeholder="验证码" v-model="captcha">
      <img class="get_verification" src="http://localhost:4000/captcha" alt="captcha" @click="getCaptcha()" ref="captcha">
    </section>

1.  在 `methods`，定义 `getCaptcha` 的方法，通过 `this.$refs` 获取到图形验证码的引用对象，为其指明 `src` 路径，利用时间差，时间一直是在变化的，`Date.now()`，这样就可以动态生成图形验证码，代码如下所示：

methods: { 
        // 获取一个新的图形验证码
        getCaptcha(event) { 
          this.$refs.captcha.src = 'http://localhost:4000/captcha?time=' + Date.now()
        }
    }

1.  效果如下图所示：  
    ![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3dlaXhpbl80MjYxNDA4MA_size_16_color_FFFFFF_t_70_pic_center]  
    ![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3dlaXhpbl80MjYxNDA4MA_size_16_color_FFFFFF_t_70_pic_center 1]

[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3dlaXhpbl80MjYxNDA4MA_size_16_color_FFFFFF_t_70_pic_center]: /images/20230528/12a4559a00c94974b65d86864c68ed56.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3dlaXhpbl80MjYxNDA4MA_size_16_color_FFFFFF_t_70_pic_center 1]: /images/20230528/3aca76368d204031b94fcc564c977fe2.png

发表评论取消回复

表情：

评论列表（有 0 条评论，1人围观）

还没有评论，来说两句吧...

相关阅读

相关 vue实现点击动态更换样式

ue有一个很大的优点就是不用操作dom，极大的提高了性能，就像下面的实现点击动态绑定样式这个功能，相比js和jq就精简了很多。 html： <div clas...

左手的ㄟ右手/ 2024年04月17日 16:06/ 0 赞/ 105 阅读

相关自己实现图形验证码

如果不想重复造轮子，参考上一篇文章：[SpringBoot生成图形验证码\_Muscleheng的博客-CSDN博客][SpringBoot_Muscleheng_-CSDN]

水深无声/ 2024年03月31日 17:01/ 0 赞/ 133 阅读

相关点击读秒获取验证码按钮实现

在桌面上面创建一个后缀名.html的文本，把代码复制进去就可以测试了。注意如需要做的好看点，样式自己添加。 1.需要给button设置背景，字体颜色，2.点击以后设置变化颜色

亦凉/ 2024年02月17日 17:34/ 0 赞/ 180 阅读

相关 SpringBoot实现图形验证码

前言在Web应用程序中，为了保护用户信息的安全性，验证码已经成为了一个非常普遍的安全措施，而Hutool-captcha是一款非常优秀的开源图形验证码工具，简单易用，提

我会带着你远行/ 2023年10月09日 23:18/ 0 赞/ 96 阅读

相关 vue 如何实现点击动态更新图形验证码

一、vue 点击动态更新图形验证码 1. 在验证码的图片上，绑定点击事件 `getCaptcha()`，同时使用 `ref` 指明图形验证码的引用对象，代码如下所示：

怼烎@/ 2023年07月24日 14:41/ 0 赞/ 2 阅读

相关 vue实现动态验证码和短信验证码

一：动态验证码： html部分 <div style="display: flex;align-items: center;">

我就是我/ 2022年05月24日 10:44/ 0 赞/ 384 阅读

相关点击生成动态验证码(工具类)

1.页面  <div class="col-sm-3"> <img id="vcode" src="/ch

喜欢ヅ旅行/ 2022年05月15日 15:51/ 0 赞/ 318 阅读

相关 servlet生成验证码和点击刷新验证码

javaweb项目，有两个文件，一个java文件，用来生成验证码并输出到servlet输出流中。一个html文件，用来写组件和点击事件，刷新验证码。 CodeServlet.

- 日理万妓/ 2022年03月21日 06:46/ 0 赞/ 534 阅读

相关爬虫验证码：破解【点击旋转验证码】

这里破解某某动漫的点击翻转验证码为例：![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cH

蔚落/ 2022年02月13日 11:13/ 0 赞/ 1175 阅读

相关 java图形验证码实现

正文今天来学习下图形验证码的生成，首先依赖开源组件： <dependency> <groupId>com.github.penggle</gro

比眉伴天荒/ 2022年01月07日 07:19/ 0 赞/ 495 阅读