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 () { ...
随机推荐
- tp5(laravel7) ajax模型修改数据
① 设置ajax请求(10分) ② 后台更改数据值(10分) ③ 重新计算平均分(10分) ④ 无刷新更新评分结果(10分) 思路: 在详情页面中有一个评分的按钮,单击后进行修改数据,首先找见本条数据 ...
- layui ajax删除
表单页面 //监听行工具事件 table.on('tool(test)', function(obj){ var data = obj.data; //console.log(obj) if(obj. ...
- SSH 免密码认证登陆
检查是否已安装ssh rpm -qa |grep ssh 如未安装可以重新安装 yum install -y openssl openssh-server 修改配置 vim /etc/ssh/ssh ...
- 微信小程序 app.js globalData 赋值报错
//success方法要用用success: res => {}的格式 success: res => { } //赋值报错 success:function(e){ } //报错内容: ...
- 盘点十大GIS相关算法
1.道格拉斯-普克算法(Douglas–Peucker) 道格拉斯-普克算法(Douglas–Peucker algorithm,亦称为拉默-道格拉斯-普克算法.迭代适应点算法.分裂与合并算法)是将曲 ...
- Ajax概述,封装以及联合模板引擎进行数据交互
欢迎大家去博客冰山一树Sankey,浏览效果更好.直接右上角搜索该标题即可 博客园主页:博客园主页-冰山一树Sankey CSDN主页:CSDN主页-冰山一树Sankey 更多资料可参考Ajax 介绍 ...
- springsecurity-01-0511
springsecurity-01-0511课堂代码 BaseController package com.springsecurity.springsecurity.controller; impo ...
- MySQL—索引(Index)
前言: 关于MySql索引数据结构和实现原理的讲解值得阅读一下: 实现原理:https://www.cnblogs.com/songwenjie/p/9415016.htm 索引数据结构:https: ...
- CF487E Tourists(圆方树+树链剖分+multiset/可删堆)
CF487E Tourists(圆方树+树链剖分+multiset/可删堆) Luogu 给出一个带点权的无向图,两种操作: 1.修改某点点权. 2.询问x到y之间简单路径能走过的点的最小点权. 题解 ...
- K8S原来如此简单(七)存储
emptyDir临时卷 有些应用程序需要额外的存储,但并不关心数据在重启后仍然可用. 例如,缓存服务经常受限于内存大小,将不常用的数据转移到比内存慢.但对总体性能的影响很小的存储中. 再例如,有些应用 ...