//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. Visual Studio(C#)快捷键与Eclipse(JAVA)快捷键对比

    Visual Studio与Eclipse快捷键对比   Visual Studio Eclipse 代码提示: Ctrl+J Ctrl+空格键 / Alt+/ .abcdefghijklmnopqr ...

  2. kubernetes 创建nginx 容器

    参考:http://blog.csdn.net/qq1010885678/article/details/48832067 一个简单的nginx服务器 先决条件:你需要拥有的是一个部署完毕并可以正常运 ...

  3. Saltstack设置安装源为阿里源

    Saltstack设置安装源为官方源有时候在国内网络不好安装较慢或者安装不上,可设置为阿里源 比如对于 Centos 7 系统,在 saltstack 的官网提供的配置初始化手册是: sudo yum ...

  4. 转:关于ROWNUM的使用

    转载自:原文:https://blog.csdn.net/songsenkeji/article/details/4432942 ROWNUM的概念ROWNUM是一个虚假的列.它将被分配为 1,2,3 ...

  5. SMB服务简介

      1.Samba简介 Samba是种自由软件,用来让UNIX系列的操作系统与微软Windows操作系统的SMB/CIFS(Server Message Block/Common Internet F ...

  6. [No0000134]C#中的委托,匿名方法和Lambda表达式

    简介 在.NET中,委托,匿名方法和Lambda表达式很容易发生混淆.我想下面的代码能证实这点.下面哪一个First会被编译?哪一个会返回我们需要的结果?即Customer.ID=5.答案是6个Fir ...

  7. [No0000FD]C# 正则表达式

    正则表达式 是一种匹配输入文本的模式..Net 框架提供了允许这种匹配的正则表达式引擎.模式由一个或多个字符.运算符和结构组成. 定义正则表达式 下面列出了用于定义正则表达式的各种类别的字符.运算符和 ...

  8. [No0000B6]C#中 ==与equals的区别

    using System; internal class Person { public Person(string name) { Name = name; } public string Name ...

  9. 区块链共识机制:POW、POS、DPOS、PBFT、POOL

    共识机制作为区块链的关键技术之一,在业务吞吐量.交易速度.不可篡改性.准入门槛等等方面发挥重要的作用. 区块链是去中心化的,没有中心记账节点,所以需要全网对账本达成共识.目前有POW.POS.DPOS ...

  10. SSH 结构中 不同角色登录,显示不同的菜单

    关于这个功能,这里也就是提供一个思路,在做项目的时候因为要用到,肯定存在更好的方法,此思路仅供参考. 一.关于前台页面的接收方式 这里使用struts2的标签: <s:iterator valu ...