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()}
}

效果如下图所示：

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

python动态图形_利用matplotlib实现根据实时数据动态更新图形
我就废话不多说了,直接上代码吧! from time import sleep from threading importThread import numpy as np import matplo ...
h5 数字变化_前端/h5 D3.js实现根据数据动态更新图形/类似进度实时变化效果
最近接到一个需求,在满足规则下,实现类似这种展示效果,其实就是用图形反映数据(NK,一种干扰值) 运行后,它其实是不断在动的,每格都可能显示灰色或者彩色这里一共是10个格子,每格代表一个范围边界,说 ...
在vue项目或者react项目中实现图形验证码功能
效果演示使用说明我对这个图形验证码做了一个组件的封装,如果你的项目是vue项目就粘贴vue章节的组件代码,是react项目就粘贴react章节的组件代码.组件的使用很简单,只需要传递一个prop, ...
python 动态图形_在matplotlib中动态更新图形
# when the code works but it's meaningless to include it ### When I can't get this part to work and ...
图形验证码的两种实现方式
情形一:图形验证码跟短信验证码一起,只需要将后台提供的动态链接填到(id="img")的src中即可生成动态验证码. 然后,在需要请求接口的地方,只需把(id="imgC ...
美多商场之图形验证码
美多商场之图形验证码 1.图形验证码逻辑分析 2.图形验证码接口设计和定义 3.图形验证码后端逻辑 4.图形验证码前端逻辑 1.图形验证码逻辑分析目的:了解图形验证码前后端业务逻辑流程和功能需求知 ...
vue放大缩小div_vue 放大缩小 svg 图形（原理类似整个列表更新）
原料 :vue+element-ui+svg 目的:让svg 图形在点击按钮后放大和缩小 html style="fill:#7daf7d;stroke:#b5acac;stroke-wid ...
Vue+Vuex+Axios+ECharts 画一个动态更新的中国地图
一.生成项目及安装插件 # 安装 Vue Cli npm install vue-cli -g# 初始化项目 vue init webpack vue-china-map# 切到目录下 cd vue- ...
seo vue 动态路由_基于vue.jsvue-router的动态更新TDK（SEO优化）
本文基于工作项目开发,做的整理笔记前几天帮朋友解决这个问题,顺带学习了一下,做个笔记Mark下. 前提条件: 你已经了解并使用vue,能够搭建应用站点. 编码环境: system:OS X EI C ...

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

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

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

最新文章

热门文章