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 相关文章推荐
Javascript玩转继承(二)
May 08 Javascript
自己封装的常用javascript函数分享
Jan 07 Javascript
jquery模拟alert的弹窗插件
Jul 31 Javascript
深入浅析JavaScript中数据共享和数据传递
Apr 25 Javascript
全面介绍javascript实用技巧及单竖杠
Jul 18 Javascript
Vue实现百度下拉提示搜索功能
Jun 21 Javascript
vue resource post请求时遇到的坑
Oct 19 Javascript
vue2.5.2使用http请求获取静态json数据的实例代码
Feb 27 Javascript
快速解决vue在ios端下点击响应延时的问题
Aug 27 Javascript
微信小程序搜索框样式并实现跳转到搜索页面(小程序搜索功能)
Mar 10 Javascript
Js数组扁平化实现方法代码总汇
Nov 11 Javascript
JS闭包原理及其使用场景解析
Dec 03 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
dedecms后台验证码总提示错误的解决方法
2007/03/21 PHP
PHP获取指定时间段之间的 年,月,天,时,分,秒
2016/06/05 PHP
php实现构建排除当前元素的乘积数组方法
2018/10/06 PHP
php封装的page分页类完整实例代码
2020/02/01 PHP
jQuery如何获取同一个类标签的所有值(默认无法获取)
2014/09/25 Javascript
浅谈javascript中字符串String与数组Array
2014/12/31 Javascript
JavaScript实现带播放列表的音乐播放器实例分享
2016/03/07 Javascript
jQuery实现表格与ckeckbox的全选与单选功能
2016/11/24 Javascript
jquery做个日期选择适用于手机端示例
2017/01/10 Javascript
jquery实现下拉框左右选择功能
2017/02/21 Javascript
Angularjs上传文件组件flowjs功能
2017/08/07 Javascript
温故知新——JavaScript中的字符串连接问题最全总结(推荐)
2017/08/21 Javascript
微信小程序的日期选择器的实例详解
2017/09/29 Javascript
vue 实现的树形菜的实例代码
2018/03/19 Javascript
vue中使用better-scroll实现滑动效果及注意事项
2018/11/15 Javascript
微信小程序自定义可滑动日历界面
2018/12/28 Javascript
JS原形与原型链深入详解
2020/05/09 Javascript
python统计文本字符串里单词出现频率的方法
2015/05/26 Python
Django 限制用户访问频率的中间件的实现
2018/08/23 Python
django 基于中间件实现限制ip频繁访问过程详解
2019/07/30 Python
Python3.6+selenium2.53.6自动化测试_读取excel文件的方法
2019/09/06 Python
详解Python time库的使用
2019/10/10 Python
python获取全国城市pm2.5、臭氧等空气质量过程解析
2019/10/12 Python
解决安装pyqt5之后无法打开spyder的问题
2019/12/13 Python
python 实现仿微信聊天时间格式化显示的代码
2020/04/17 Python
如何使用 Python 读取文件和照片的创建日期
2020/09/05 Python
详解Pymongo常用查询方法总结
2021/01/29 Python
Why do we need Unit test
2013/01/03 面试题
课改先进个人汇报材料
2014/01/26 职场文书
出纳试用期自我鉴定范文
2014/09/16 职场文书
公司周年庆典标语
2014/10/07 职场文书
2014年司法所工作总结
2014/11/22 职场文书
上下班时间调整通知
2015/04/23 职场文书
Pytest之测试命名规则的使用
2021/04/16 Python
python必学知识之文件操作(建议收藏)
2021/05/30 Python
SQL语句多表联合查询的方法示例
2022/04/18 MySQL