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

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

在验证码的图片上，绑定点击事件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>

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

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

效果如下图所示：