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 相关文章推荐
ASP.NET jQuery 实例6 (实现CheckBoxList成员全选或全取消)
Jan 13 Javascript
jquery下checked取值问题的解决方法
Aug 09 Javascript
js delete 用法(删除对象属性及变量)
Aug 24 Javascript
JavaScript对象之深度克隆介绍
Dec 08 Javascript
浏览器环境下JavaScript脚本加载与执行探析之defer与async特性
Jan 14 Javascript
Bootstrap入门书籍之(一)排版
Feb 17 Javascript
jQuery验证插件validate使用详解
May 11 Javascript
JSON 必知必会 观后记
Oct 27 Javascript
原生JS实现网页手机音乐播放器 歌词同步播放的示例
Feb 02 Javascript
element-ui中的select下拉列表设置默认值方法
Aug 24 Javascript
解决微信小程序调用moveToLocation失效问题【超简单】
Apr 12 Javascript
Vue $mount实战之实现消息弹窗组件
Apr 22 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
PHP入门速成教程
2007/03/19 PHP
openPNE常用方法分享
2011/11/29 PHP
PHP实现类似于C语言的文件读取及解析功能
2017/09/01 PHP
用JavaScript编写COM组件的步骤
2009/03/17 Javascript
基于jquery的模态div层弹出效果
2010/08/21 Javascript
为什么要在引入的css或者js文件后面加参数的详细讲解
2013/05/03 Javascript
常规表格多表头查询示例
2014/02/21 Javascript
Javascript Memoizer浅析
2014/10/16 Javascript
JS倒计时代码汇总
2014/11/25 Javascript
JS实现控制表格行内容垂直对齐的方法
2015/03/30 Javascript
基于JS代码实现图片在页面中旋转效果
2016/06/16 Javascript
JavaScript实现图片本地预览功能【不用上传至服务器】
2017/09/20 Javascript
详解Vue如何支持JSX语法
2017/11/10 Javascript
C#程序员入门学习微信小程序的笔记
2019/03/05 Javascript
vue eslint简要配置教程详解
2019/07/26 Javascript
使用python实现拉钩网上的FizzBuzzWhizz问题示例
2014/05/05 Python
Python多线程threading和multiprocessing模块实例解析
2018/01/29 Python
Python实现多级目录压缩与解压文件的方法
2018/09/01 Python
python爬虫之自动登录与验证码识别
2020/06/15 Python
使用python将图片格式转换为ico格式的示例
2018/10/22 Python
Python 创建新文件时避免覆盖已有的同名文件的解决方法
2018/11/16 Python
Linux下通过python获取本机ip方法示例
2019/09/06 Python
CSS3 选择器 基本选择器介绍
2012/01/21 HTML / CSS
面试后感谢信怎么写
2014/02/01 职场文书
领导干部考察材料
2014/02/08 职场文书
中班中秋节活动反思
2014/02/18 职场文书
生日礼品店创业计划书范文
2014/03/21 职场文书
会计学专业求职信
2014/07/17 职场文书
少先队活动总结
2014/08/29 职场文书
2014年售后服务工作总结
2014/11/18 职场文书
党员身份证明材料
2015/06/19 职场文书
高一地理教学工作总结
2015/08/12 职场文书
求职信:会计求职的写作技巧
2019/04/24 职场文书
有关保护环境的宣传标语100条
2019/08/07 职场文书
高一作文之暖冬
2019/11/09 职场文书
HTML CSS 一个标签实现带动画的抖音LOGO
2022/04/26 HTML / CSS