<template>
<div>
<el-button :disabled="disabled" @click="sendcode" class="sendcode">{{btntxt}}</el-button>
</div>
</template> <script>
export default {
data() {
return {
disabled:false,
time:5,
btntxt:"发送验证码",
};
},
methods: {
sendcode(){
this.time=5;
this.timer();
},
//发送手机验证码倒计时
timer() {
if (this.time > 0) {
this.disabled=true;
this.time--;
this.btntxt=this.time+"秒";
setTimeout(this.timer, 1000);
} else{
this.time=0;
this.btntxt="发送验证码";
this.disabled=false;
}
},
}
}
</script> <style scoped>
.el-button{
margin: 100px 50px;
}
</style>

  

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

  1. Vue 获取验证码倒计时组件

    子组件 <template> <a class="getvalidate":class="{gray: (!stop)}"@click='cl ...

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

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

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

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

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

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

  5. angular中service封装$http做权限时拦截403等状态及获取验证码倒计时、跨域问题解决

    封装$http.做权限时拦截403等状态及获取验证码倒计时: 拦截接口返回状态 var app = angular.module('app'); app.factory('UserIntercepto ...

  6. 前端学习——ionic/AngularJs——获取验证码倒计时按钮

     按钮功能为:点击"获取验证码"--按钮不可用-设置倒计时-60秒后重新获取. 代码借鉴于:http://plnkr.co/edit/Swj82MpJSix3a47jZRHP?p= ...

  7. Android中注册获取验证码倒计时按钮

    public class CountDownTimerUtils extends CountDownTimer { private TextView mTextView; /** * @param t ...

  8. iOS开发之--获取验证码倒计时及闪烁问题解决方案

    大家在做验证码的时候一般都会用到倒计时,基本上大家实现的方式都差不多,先贴出一些代码来.. -(void)startTime{ __block ; //倒计时时间 dispatch_queue_t q ...

  9. js点击按钮获取验证码倒计时

    //发送验证码倒计时 var clock = ''; var nums = 60; var btn; $("#btnGetVerCode").click(function () { ...

随机推荐

  1. laravel7 数据迁移及填充数据

    1:置迁移数据表,创建生成模型和迁移文件: php artisan make:model Article -m 2:接着,在框架中的database/migrations文件夹中找到刚创建的用户表Ar ...

  2. tp5 商品模型的添加展示

    路由 //商品模型展示的路由 Route::get('type','/pyg/good/listType'); //将type_id传送至/pyg/good/addType的路由 Route::get ...

  3. CentOS Linux服务器 挂载硬盘

    1.通过fdisk -l 查看目前的硬盘信息,默认是从sda开始排,增加第二块硬盘的时候,会显示sdb,以此类推,我的是vda,vdb,以自己实际的为主,下面以sda,sdb 讲解 2.添加硬盘3.重 ...

  4. sql server数据库如何存储数组,int[]float[]double[]数组存储到数据库方法

    原文地址:https://www.zhaimaojun.top/Note/5475296 将数组存储到数据库的方法 (本人平时同csharp编写代码,所以本文中代码都是csharp代码,有些地方jav ...

  5. Java数组(Array)和列表(ArryList)有什么区别?

    Array和ArryList的不同点 Array可以包含基本类型和对象类型,ArrayList只能包含对象类型 Array大小是固定的,ArrayList的大小动态变化的 ArrayList提供了更多 ...

  6. Using Beyond Compare with TFS

    In order to configure Visual Studio to use Beyond Compare for a compare operation choose the followi ...

  7. 使用Github Action自动填写疫情通

    使用Github Action自动填写疫情通 西电晨午晚检一天三次,通过企业号功能进行填写.实际上,西电企业号大部分功能是以网页模式工作的,通过构造connection发送合适的request,设置计 ...

  8. 线程池提交任务时submit()和execute()的区别

    因为之前一直是用的execute方法,最近有个情况需要用到submit方法,所以研究了下. 他们的区别: 1.execut()可以添加一个Runable任务,submit()不仅可以添加Runable ...

  9. noi.ac 字符串游戏

    题面 Zhangzj和Owaski在玩一个游戏.最开始有一个空的01串,Zhangzj和Owaski轮流进行操作,Zhangzj先走.每次进行操作的人可以在串上任意位置加一个新的字符,由于串是01串, ...

  10. Redis快速入门:初识Redis

    [IT168 专稿]在之前的文章中介绍了<Redis快速入门:选择Key-Value Store>,今天给大家介绍Redis的入门知识.Redis是一个开源的使用ANSI C语言编写.支持 ...