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 一段左右两边随屏滚动的代码
Jun 18 Javascript
如何使用jquery动态加载js,css文件实现代码
Apr 03 Javascript
jQuery选择器简明总结(含用法实例,一目了然)
Apr 25 Javascript
JavaScript中数据结构与算法(五):经典KMP算法
Jun 19 Javascript
D3.js中data(), enter() 和 exit()的问题详解
Aug 17 Javascript
jQuery支持添加事件的日历特效代码分享(3种样式)
Aug 24 Javascript
js调用刷新界面的几种方式
May 03 Javascript
Node.js使用gm拼装sprite图片
Jul 04 Javascript
vue实现密码显示与隐藏按钮的自定义组件功能
Apr 23 Javascript
对vue中的事件穿透与禁止穿透实例详解
Oct 28 Javascript
Vue组件通信入门之Provide和Inject机制
Dec 29 Javascript
jQuery实现开关灯效果
Aug 02 jQuery
通过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的论坛(4)
2006/10/09 PHP
mysql下创建字段并设置主键的php代码
2010/05/16 PHP
javascript div 遮罩层封锁整个页面
2009/07/10 Javascript
javascript iframe内的函数调用实现方法
2009/07/19 Javascript
将函数的实际参数转换成数组的方法
2010/01/25 Javascript
日期处理的js库(迷你版)--自建js库总结
2011/11/21 Javascript
jQuery 过滤方法filter()选择具有特殊属性的元素
2014/06/15 Javascript
jQuery Ajax使用实例
2015/04/16 Javascript
bootstrap模态框垂直居中效果
2016/12/03 Javascript
javascript数据结构中栈的应用之符号平衡问题
2017/04/11 Javascript
jQuery:unbind方法的使用详解
2017/08/14 jQuery
利用vue.js实现被选中状态的改变方法
2018/02/08 Javascript
VUE2.0+Element-UI+Echarts封装的组件实例
2018/03/02 Javascript
vue基于mint-ui实现城市选择三级联动
2020/06/30 Javascript
还不懂递归?读完这篇文章保证你会懂
2018/07/29 Javascript
微信小程序实现顶部导航特效
2019/01/28 Javascript
在vue中使用setInterval的方法示例
2019/04/16 Javascript
node 解析图片二维码的内容代码实例
2019/09/11 Javascript
Vue.js中provide/inject实现响应式数据更新的方法示例
2019/10/16 Javascript
[01:34]传奇从这开始 2016国际邀请赛中国区预选赛震撼开启
2016/06/26 DOTA
Python 包含汉字的文件读写之每行末尾加上特定字符
2016/12/12 Python
Python简单读取json文件功能示例
2017/11/30 Python
python按照多个条件排序的方法
2019/02/08 Python
解决python 读取 log日志的编码问题
2019/12/24 Python
python模拟斗地主发牌
2020/04/22 Python
详解Python之Scrapy爬虫教程NBA球员数据存放到Mysql数据库
2021/01/24 Python
CSS 说明横向进度条最后显示文字的实现代码
2020/11/10 HTML / CSS
英国和世界各地鲜花速递专家:Arena Flowers
2018/02/10 全球购物
什么是属性访问器
2015/10/26 面试题
SOA面试题:如何在SOA中实现松耦合
2013/07/21 面试题
应聘教师推荐信
2013/10/31 职场文书
房屋租赁协议书
2014/04/10 职场文书
2015年医院科室工作总结范文
2015/05/26 职场文书
2015企业年终工作总结范文
2015/05/27 职场文书
Python基于百度AI实现抓取表情包
2021/06/27 Python
WebRTC记录音视频流(web技术分享)
2022/02/24 Javascript