欢迎来到代码驿站!

vue

当前位置:首页 > 网页前端 > vue

基于vue实现图片验证码倒计时60s功能

时间:2021-09-25 08:18:06|栏目:vue|点击:

1.基于VUE实现图片验证码

html:

   <div class="formItem pr">
       <img src="../../image/icon2.png" alt="">
       <input type="text" placeholder="请输入验证码">
       <img :src="IdentifyingCode" alt="图文验证码" class="IdentifyingCode" @click="updateIdentifyingCode(true)">
     </div>

js:

2.vue实现验证码倒计时60s

html:

 <div class="formItem">
      <img src="../../image/icon2.png" alt="">
      <input type="text" placeholder="请输入验证码">
      <button class="button" type="button" name="button" @click="sendCode()" v-show="show">获取验证码</button>
      <button class="button codebtn" type="button" name="button" v-show="!show">{{sum}}s</button>
   </div>

js:

效果图:

总结

上一篇:vue路由跳转传参数的方法

栏    目:vue

下一篇:Vue export import 导入导出的多种方式与区别介绍

本文标题:基于vue实现图片验证码倒计时60s功能

本文地址:http://www.codeinn.net/misctech/177284.html

推荐教程

广告投放 | 联系我们 | 版权申明

重要申明:本站所有的文章、图片、评论等,均由网友发表或上传并维护或收集自网络,属个人行为,与本站立场无关。

如果侵犯了您的权利,请与我们联系,我们将在24小时内进行处理、任何非本站因素导致的法律后果,本站均不负任何责任。

联系QQ:914707363 | 邮箱:codeinn#126.com(#换成@)

Copyright © 2020 代码驿站 版权所有