1. <template>
  2. <div>
  3. <el-button :disabled="disabled" @click="sendcode" class="sendcode">{{btntxt}}</el-button>
  4. </div>
  5. </template>
  6.  
  7. <script>
  8. export default {
  9. data() {
  10. return {
  11. disabled:false,
  12. time:5,
  13. btntxt:"发送验证码",
  14. };
  15. },
  16. methods: {
  17. sendcode(){
  18. this.time=5;
  19. this.timer();
  20. },
  21. //发送手机验证码倒计时
  22. timer() {
  23. if (this.time > 0) {
  24. this.disabled=true;
  25. this.time--;
  26. this.btntxt=this.time+"秒";
  27. setTimeout(this.timer, 1000);
  28. } else{
  29. this.time=0;
  30. this.btntxt="发送验证码";
  31. this.disabled=false;
  32. }
  33. },
  34. }
  35. }
  36. </script>
  37.  
  38. <style scoped>
  39. .el-button{
  40. margin: 100px 50px;
  41. }
  42. </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. linux下的硬盘分区、格式化、挂载

    linux下的MBR(msdos)分区.格式化.挂载 在linux下,需要使用一块硬盘. 需要进行以下四步: 识别硬盘-----分区规划-----格式化-----挂载 步骤一:分区规划 MBR模式分区 ...

  2. 【战略】以色列公司的数据驱动tip

    Eric Rapps:我们的团队获得了大量的收入,并且持续保持着增长.如果获得我们的投资,实际上是你是获得了和相关领域技术积累.专家沟通的支持.但更重要的是,你可以近距离地接触我们的运营资源,您可以直 ...

  3. layui 数据表格的使用(分页+总条数)

    下载地址 https://www.layui.com/ 点击实例,找到layui适合模板 2. 新建html将代码复制到对应模板,修改对应样式路径. 5.修改对应参数(url,field) 追加以下参 ...

  4. ASP.NET Core 6框架揭秘实例演示[22]:如何承载你的后台服务[补充]

    借助 .NET提供的服务承载(Hosting)系统,我们可以将一个或者多个长时间运行的后台服务寄宿或者承载我们创建的应用中.任何需要在后台长时间运行的操作都可以定义成标准化的服务并利用该系统来承载,A ...

  5. MySQL 8.0安装以及初始化错误解决方法

    MySQL 8.0 安装配置及错误排查 官网下载 CentOS7环境下的具体安装步骤 初始化MySQL发生错误的解决方法 忘记数据库root密码 官网下载 mysql官网下载链接:https://de ...

  6. 大作业:开发一个精美的 Web 网站

    大作业:开发一个精美的 Web 网站 实验目的: 掌握一个完整精美网页开发的基本方法 实验要求: 1.开发一个 Web 站点,至少有 3 个以上的页面: 2.采用 CSS 和 HTML 文件分开方法: ...

  7. LGP7915题解

    奇怪的乱搞做法(? 首先我们枚举序列的每一个位置,从这个位置劈开,假设这个位置是 \(i\),那么按照题意模拟,我们能够构造一个最终序列有 \(i\) 个 L 和 \(n-i\) 个 R 的符合题意的 ...

  8. iframe于iframe页面之间的函数相互调用

    因为iframe页面于包括父页面在内的其他页面通讯有跨域问题,所以只有在服务器环境下或者火狐浏览器下才能测试. 在iframe页面调用父页面的函数采用parent,例子:在父页面有一个say()函数, ...

  9. 【数据库】SQL 语句大全

    数据操作 SELECT --从数据库表中检索数据行和列 INSERT --向数据库表添加新数据行 DELETE --从数据库表中删除数据行 UPDATE --更新数据库表中的数据 数据定义 CREAT ...

  10. 2.6 C++STL queue详解

    文章目录 2.6.1 引入 2.6.2 代码示例 2.6.3 代码运行结果 总结 2.6.1 引入 首先,在STL中 queue 和 stack 其实并不叫容器(container),而是叫适配器(a ...