vue 如何实现点击动态更新图形验证码
一、vue 点击动态更新图形验证码
在验证码的图片上,绑定点击事件
getCaptcha()
,同时使用ref
指明图形验证码的引用对象,代码如下所示:在
methods
,定义getCaptcha
的方法,通过this.$refs
获取到图形验证码的引用对象,为其指明src
路径,利用时间差,时间一直是在变化的,Date.now()
,这样就可以动态生成图形验证码,代码如下所示:methods: {
// 获取一个新的图形验证码
getCaptcha(event) {
this.$refs.captcha.src = 'http://localhost:4000/captcha?time=' + Date.now()
}
}
效果如下图所示:
还没有评论,来说两句吧...