其实要实现这个功能原理非常简单,就是setInterval+setTimeout+clearInterval结合使用,首先在data里定义一个变量second,初始值为60,然后在setInterval里执行每秒减1的操作,setTimeout在60秒后执行clearInterval清除定时器的操作

<view v-if="showText==true" class="send" @click="getCode">发送验证码</view>
<view v-else class="send">{{second}}s重新发送</view>

  data() {
    return {
      second:60,
      showText:true,
    };
 },

getCode(){//倒计时
this.showText = false
var interval = setInterval(() => {
let times = --this.second
this.second = times<10?'0'+times:times //小于10秒补 0
}, 1000)
setTimeout(() => {
clearInterval(interval)
this.second=60
this.showText = true
}, 60000)
},

uni验证码60秒倒计时的更多相关文章

  1. button获取验证码60秒倒计时 直接用

    __block ; __block UIButton *verifybutton = _GetverificationBtn; verifybutton.enabled = NO; dispatch_ ...

  2. js实现60秒倒计时效果(使用了jQuery)

    今天碰到要实现一个类似那种短信验证码60秒倒计时的需求,好久不写js,有点手生.把代码记录下,方便后续查阅. 这里我用了jQuey,毕竟写起来简洁点.下面直接看效果和代码. 一.效果          ...

  3. 微信小程序60秒倒计时

    微信小程序发送短信验证码后60秒倒计时功能,效果图: 完整代码 index.wxml <!--index.wxml--> <view class="container&qu ...

  4. jQuery实现发送短信验证码后60秒倒计时

    <!DOCTYPE html> <html> <head> <meta charset="utf-8"> <script sr ...

  5. iOS-登录发送验证码时60秒倒计时,直接用

    __block NSInteger timeout= ; //倒计时时间 KWeakSelf dispatch_queue_t queue = dispatch_get_global_queue(DI ...

  6. 获取验证码,60秒倒计时js

    <input type="button" id="btn" value="免费获取验证码" /><script type= ...

  7. JS获取短信验证码60秒

    <script language="javascript">    function get_mobile_code(){        $.post("{{ ...

  8. js jquery 按钮点击后 60秒之后才能点击 60秒倒计时

    var wait = 60; function time(o) { if (wait == 0) { $(o).attr("disabled", false); $(o).val( ...

  9. 点击按钮出现60秒倒计时js代码

    <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/ ...

随机推荐

  1. shell-快速入门_批处理脚本编程语言

    1. Shell概述 1.1. Shell是什么 Shell是一门批处理脚本编程语言. 批处理是什么? 操作系统都分为(GUI)图形界面,命令界面(command). 命令操作的可以不用一一条执行.可 ...

  2. golang学习笔记--函数和方法

    在go中,函数类型是一等类型,这意味着可以吧函数当做一个值来传递和使用. func divide(dividend int,divisor int)(int,error){ //省略部分代码 } 参数 ...

  3. .net Dapper 实践系列(5) ---事务编辑(Layui+Ajax+Dapper+MySQL)

    目录 写在前面 实践步骤 写在前面 上一小节,我们总结了根据Id查询多表数据,最后返回Json对象给前台的例子.接下来,在这一小节我们要实现多表编辑的操作. 实践步骤 因为上一小节以及创建了Edit视 ...

  4. mybatis中用注解如何处理存储过程返回的多个结果集?

    sql代码: create procedure sptest.getnamesanditems() reads sql data dynamic result sets 2 BEGIN ATOMIC ...

  5. vue--设置cookie

    Vue-CLI项目-vue-cookie与vue-cookies处理cookie vue-cookie 一.模块的安装 npm install vue-cookie --save #--save可以不 ...

  6. Nginx中的$document_uri与$request_uri以及$http_referer

    Nginx基于$document_uri的访问控制,变量$document_uri该变量等价于$uri,其实也等价于location匹配. 示例1: 当用户请求的url中包含/admin/时,直接返回 ...

  7. 剑指前端(前端入门笔记系列)——BOM

    BOM ECMAScript是JavaScript的核心,但如果要在Web中使用JavaScript,那么BOM(浏览器对象模型)则无疑才是真正的核心,BOM提供了很多对象,用于访问浏览器的功能,这些 ...

  8. Vue学习之vue-resource小结(五)

    一.Vue实现数据交互的方式: 1.Vue除了vue-resource之外,还可以使用‘axios’的第三方包实现数据的请求: 2.常见的数据请求类型有: get.post.jsonp 3.JSONP ...

  9. 93.vue---在vue环境用webuploader分片上传插件遇到的超级bug(独家仅此一份)

    本来我是想想用vue-simple-uploader (https://www.cnblogs.com/xiahj/p/vue-simple-uploader.html)的 但是公司后台已经做好了we ...

  10. Object-C与标准C/C++混合编程

    转自:http://www.xue5.com/Mobile/iOS/661674.html 如何将C++和Object-C混合编程开发IOS软件(Object-c调用C++) 原文网址:http:// ...