vue获取验证码倒计时
<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获取验证码倒计时的更多相关文章
- Vue 获取验证码倒计时组件
子组件 <template> <a class="getvalidate":class="{gray: (!stop)}"@click='cl ...
- vue实现验证码倒计时60秒的具体代码
vue实现验证码倒计时60秒的具体代码 <span v-show="show" @click="getCode">获取验证码</span> ...
- Andorid实现点击获取验证码倒计时效果
这篇文章主要介绍了Andorid实现点击获取验证码倒计时效果,这种效果大家经常遇到,想知道如何实现的,请阅读本文 我们在开发中经常用到倒计时的功能,比如发送验证码后,倒计时60s再进行验证码的获取 ...
- Android 获取验证码倒计时实现
Android 获取验证码倒计时实现 2017年10月24日 09:55:41 FBY展菲 阅读数:2002 版权声明:本文为博主原创文章,未经博主允许不得转载. https://blog.cs ...
- angular中service封装$http做权限时拦截403等状态及获取验证码倒计时、跨域问题解决
封装$http.做权限时拦截403等状态及获取验证码倒计时: 拦截接口返回状态 var app = angular.module('app'); app.factory('UserIntercepto ...
- 前端学习——ionic/AngularJs——获取验证码倒计时按钮
按钮功能为:点击"获取验证码"--按钮不可用-设置倒计时-60秒后重新获取. 代码借鉴于:http://plnkr.co/edit/Swj82MpJSix3a47jZRHP?p= ...
- Android中注册获取验证码倒计时按钮
public class CountDownTimerUtils extends CountDownTimer { private TextView mTextView; /** * @param t ...
- iOS开发之--获取验证码倒计时及闪烁问题解决方案
大家在做验证码的时候一般都会用到倒计时,基本上大家实现的方式都差不多,先贴出一些代码来.. -(void)startTime{ __block ; //倒计时时间 dispatch_queue_t q ...
- js点击按钮获取验证码倒计时
//发送验证码倒计时 var clock = ''; var nums = 60; var btn; $("#btnGetVerCode").click(function () { ...
随机推荐
- Linux swap分区操作
swap交换分区是系统RAM的补充,swap 分区支持虚拟内存.当没有足够的 RAM 保存系统处理的数据时,会将数据写入 swap 分区,当系统缺乏 swap 空间时,内核会因 RAM 内存耗尽而终止 ...
- U3D破解方法
文件我的云盘里面有,然后操作如下:Win版破解方法:1.安装Unity后(联网破解不成功就断网试试),运行破解补丁.2.点击Browse选择Unity所在路径 例如我的Unity安装路径 F:\Sof ...
- VUE-表单验证
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8&quo ...
- 如何修改windows Server 2012 远程桌面连接默认端口
如何修改windows Server 2012 远程桌面连接默认端口 修改windows 2012/win8.win7远程桌面连接默认端口一般需要修改注册表四个地方[HKEY_LOCAL_MACH ...
- 打靶笔记-02-vulhub-Hackademic.RTB1
打靶笔记-02-vulhub-Hackademic.RTB1 一.靶机信息 Name: Hackademic: RTB1(中等难度) Date release: 6 Sep 2011 Author: ...
- nexus3上传第三方jar包
1.新建第三方仓库,名字叫3rd_part 2.添加到maven-public组中 3.修改maven的setting.xml 4.执行命令 mvn deploy:deploy-file -Dgrou ...
- SQL语句大全,所有的SQL都在这里
转自微信公众号-我是程序汪 一.基础 1.说明:创建数据库CREATE DATABASE database-name2.说明:删除数据库drop database dbname3.说明:备份sql s ...
- Linux移植到自己的开发板(四)问题汇总
@ 目录 1 使ubuntu支持两个版本的编译链: 2 版本问题: 3 ubuntu版本的vscode下载网速太慢: 4 ubuntu占用空间过大 5 执行make zImage 出错 lzop: n ...
- 4月25日 python学习总结 互斥锁 IPC通信 和 生产者消费者模型
一.守护进程 import random import time from multiprocessing import Process def task(): print('name: egon') ...
- CF1553X Harbour.Space Scholarship Contest 2021-2022 (Div. 1 + Div. 2)
掉大分 E 对于一个序列,把它排回去的最小次数是 $\sum置换环大小-1=错位个数-置换环个数$ 注意到m小于等于n/3.那么最多修正2m个错位.正确位置的个数必须大于等于n/3才可能在m次内修正. ...