//html
<div class="input-div" v-show="formData.phone">
<input type="text" class="input code" name="code" v-model.trim="formData.code" placeholder="验证码">
<button @click="getCode(formData)" class="code-btn" :disabled="!show">
<span v-show="show">获取验证码</span>
<span v-show="!show" class="count">{{count}} s</span>
</button>
</div>

  

//js
const TIME_COUNT = 60;
data(){
return {
formData: {
phone:'',
code:'',
},
show: true,
count: '',
timer: null,
}
}, methods:{
getCode(formData){
if (!this.timer) {
this.count = TIME_COUNT;
this.show = false;
this.timer = setInterval(() => {
if (this.count > 0 && this.count <= TIME_COUNT) {
this.count--;
} else {
this.show = true;
clearInterval(this.timer);
this.timer = null;
}
}, 1000)
}
}
}

  https://blog.csdn.net/Zhooson/article/details/75228666

vue 验证码倒计时的更多相关文章

  1. vue实现验证码倒计时60秒的具体代码

    vue实现验证码倒计时60秒的具体代码 <span v-show="show" @click="getCode">获取验证码</span> ...

  2. vue获取验证码倒计时

    <template> <div> <el-button :disabled="disabled" @click="sendcode" ...

  3. jQuery获取短信验证码+倒计时实现

    jQuery 短信验证码倒计时 <script type="text/javascript" charset="utf-8"> $(function ...

  4. Andorid实现点击获取验证码倒计时效果

    这篇文章主要介绍了Andorid实现点击获取验证码倒计时效果,这种效果大家经常遇到,想知道如何实现的,请阅读本文   我们在开发中经常用到倒计时的功能,比如发送验证码后,倒计时60s再进行验证码的获取 ...

  5. js 验证码 倒计时60秒

    js 验证码 倒计时60秒 <input type="button" id="btn" value="免费获取验证码" /> & ...

  6. js&jq 发送验证码倒计时

    <input  type="text"   name=''  id="btn"> //发送验证码倒计时var wait=30; function t ...

  7. iOS-实现验证码倒计时功能(1)

    验证码倒计时按钮的应用是非常普遍的,该Blog就和你一起来写一个IDCountDownButton来实现验证码倒计时的效果.你可以想使用普通的UIButton类型按钮一样,只需要设置其倒计时时长(若未 ...

  8. iOS 短信验证码倒计时按钮的实现

    验证码倒计时按钮的应用是非常普遍的,本文介绍了IOS实现验证码倒计时功能,点击获取验证码,进入时间倒计时,感兴趣的小伙伴们可以参考一下: 实现思路: 创建按钮,添加点击方法: 用NSTimer定时器, ...

  9. Android 获取验证码倒计时实现

    Android 获取验证码倒计时实现 2017年10月24日 09:55:41 FBY展菲 阅读数:2002    版权声明:本文为博主原创文章,未经博主允许不得转载. https://blog.cs ...

随机推荐

  1. 一、K3 Cloud 实施指导《K3 Cloud实施手册》

    1.在BOS的单据体取不到序号字段 举例:单据体标识是FValueGrid,序号标识是FSeq,取到的序号标识要写成FValueGrid_FSeq才能识别到 2.k3 Cloud目前不支持在表头字段调 ...

  2. [原]Jenkins(三)---Jenkins初始配置和插件配置

    /** * lihaibo * 文章内容都是根据自己工作情况实践得出. *版权声明:本博客欢迎转发,但请保留原作者信息! http://www.cnblogs.com/horizonli/p/5331 ...

  3. Unity Editor工具-代码里复制Component

    //CopyComponent ublic static T CopyComponent<T>(T original, GameObject destination) where T : ...

  4. linux如何安装多个jdk?

    1 官网下载JDK版本 jdk-8u181-linux-x64.tar.gz 2 利用ssh工具上传安装包到Linux系统 传至:/usr/local 3 Linux用户安装的程序一般放在 /usr/ ...

  5. mui---子页面主动调用父页面的方法

    我们在做APP的时候,很多时候会有这样的功能需求,例如:登录,充值,如果登录成功,或充值成功后,需要更改当前页面以及父页面的状态信息,就会用到在子页面调用父页面的方法来实现:在子页面刷新父页面的功能. ...

  6. tsm 带库 磁带

    磁带和存储池设置 新装入带库的磁带,需执行格式化命令方可使用,而存储池采用手工定义方式加入磁带,所以checkin状态设置为private,而不使用scratch磁带自动定义方式. label lib ...

  7. 160道Java技术面试题

    1.面向对象的特征有哪些方面?2.访问修饰符public,private,protected,以及不写(默认)时的区别?3.String 是最基本的数据类型吗?4.float f=3.4;是否正确?5 ...

  8. cvLogPolar函数详解

    对于二维图形,Log-polar转换表示从笛卡尔坐标到极坐标的变化,广泛应用在计算机视觉中.此函数模仿人类视网膜中央凹视力,并且对于目标跟踪等可用于快速尺度和旋转变换不变模板匹配. 本例程实现极坐标变 ...

  9. zookerper安装部署

    ********************单节点安装zk*************************上传zk安装包到服务器/mnt目录下: [root@chavin ~]$ ll /mnt/zoo ...

  10. 新装的arcgis10.5特别卡

    在之前装过arcgis10.5,用了一段时间感觉还不错.  由于二次开发要用到AO,当时缺少开发包,所以用了10.4.  现在跟师傅合作开发,要跟他保持一致,所以用了arcgis10.5.  但是装的 ...