vue实现倒计时获取验证码效果


Posted in Javascript onApril 17, 2020

本文实例为大家分享了vue实现倒计时获取验证码效果的具体代码,供大家参考,具体内容如下

效果:

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>

更多关于倒计时的文章请查看专题:《倒计时功能》

更多JavaScript时钟特效点击查看:JavaScript时钟特效专题

以上就是本文的全部内容,希望对大家的学习有所帮助,也希望大家多多支持三水点靠木。

Javascript 相关文章推荐
jQuery选择头像并实时显示的代码
Jun 27 Javascript
从零开始学习jQuery (十一) 实战表单验证与自动完成提示插件
Feb 23 Javascript
JS获得QQ号码的昵称,头像,生日的简单实例
Dec 04 Javascript
js实现日期级联效果
Jan 23 Javascript
js实现的标题栏新消息闪烁提示效果
Jun 06 Javascript
JavaScript实现点击按钮切换网页背景色的方法
Oct 17 Javascript
jQuery Validate插件实现表单强大的验证功能
Dec 18 Javascript
微信小程序 动态绑定事件并实现事件修改样式
Apr 13 Javascript
原生js jquery ajax请求以及jsonp的调用方法
Aug 04 jQuery
select2 ajax 设置默认值,初始值的方法
Aug 09 Javascript
深入浅析vue-cli@3.0 使用及配置说明
May 08 Javascript
JS Math对象与Math方法实例小结
Jul 05 Javascript
通过layer实现可输入的模态框的例子
Sep 27 #Javascript
vue调用语音播放的方法
Sep 27 #Javascript
在SSM框架下用laypage和ajax实现分页和数据交互的方法
Sep 27 #Javascript
layui+SSM的数据表的增删改实例(利用弹框添加、修改)
Sep 27 #Javascript
vue实现在线翻译功能
Sep 27 #Javascript
webpack 处理CSS资源的实现
Sep 27 #Javascript
微信小程序 wxParse插件显示视频问题
Sep 27 #Javascript
You might like
mysql alter table命令修改表结构实例详解
2016/09/24 PHP
Javascript中eval函数的使用方法与示例
2007/04/09 Javascript
js的.innerHTML = &quot;&quot;IE9下显示有错误的解决方法
2013/09/16 Javascript
jquery 判断滚动条到达了底部和顶端的方法
2014/04/02 Javascript
简介JavaScript中用于处理正切的Math.tan()方法
2015/06/15 Javascript
AngularJS基础 ng-include 指令简单示例
2016/08/01 Javascript
JS回调函数基本定义与用法实例分析
2017/05/24 Javascript
全面解析jQuery中的$(window)与$(document)的用法区别
2017/08/15 jQuery
微信小程序富文本渲染引擎的详解
2017/09/30 Javascript
jQuery插件artDialog.js使用与关闭方法示例
2017/10/09 jQuery
微信小程序之事件交互操作实例分析
2018/12/03 Javascript
详解小程序设置缓存并且不覆盖原有数据
2019/04/15 Javascript
小程序如何支持使用 async/await详解
2019/09/12 Javascript
解决vue-cli输入命令vue ui没效果的问题
2020/11/17 Javascript
[43:41]VP vs RNG 2019国际邀请赛淘汰赛 败者组 BO3 第二场 8.21.mp4
2020/07/19 DOTA
[07:09]DOTA2-DPC中国联赛 正赛 Ehome vs Elephant 选手采访
2021/03/11 DOTA
Python3遍历目录树实现方法
2015/05/22 Python
python装饰器的特性原理详解
2019/12/25 Python
TensorFlow使用Graph的基本操作的实现
2020/04/22 Python
Python通过zookeeper实现分布式服务代码解析
2020/07/22 Python
pytorch使用horovod多gpu训练的实现
2020/09/09 Python
解决pip安装tensorflow中出现的no module named tensorflow.python 问题方法
2021/02/20 Python
ABOUT YOU罗马尼亚:超过600个时尚品牌
2019/09/19 全球购物
你经历的项目中的SCM配置项主要有哪些?什么是配置项?
2013/11/04 面试题
公司财务总监岗位职责
2013/12/14 职场文书
土木建筑学生自我评价
2014/01/14 职场文书
保安队长职务说明书
2014/02/23 职场文书
浪漫婚礼主持词
2014/03/14 职场文书
2014年清明节寄语
2014/04/03 职场文书
学校文明单位申报材料
2014/05/06 职场文书
物业前台接待岗位职责
2015/04/03 职场文书
python实现调用摄像头并拍照发邮箱
2021/04/27 Python
Springboot如何使用logback实现多环境配置?
2021/06/16 Java/Android
python全面解析接口返回数据
2022/02/12 Python
PHP正则表达式之RCEService回溯
2022/04/11 PHP
box-shadow单边阴影的实现
2023/05/21 HTML / CSS