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

一、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>

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

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

3. 效果如下图所示：