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 相关文章推荐
js escape,unescape解决中文乱码问题的方法
May 26 Javascript
jquery一般方法介绍 入门参考
Jun 21 Javascript
js写出遮罩层登陆框和对联广告并自动跟随滚动条滚动
Apr 29 Javascript
HTML页面登录时的JS验证方法
May 28 Javascript
tablesorter.js表格排序使用方法(支持中文排序)
Feb 10 Javascript
JS html时钟制作代码分享
Mar 03 Javascript
深入理解Commonjs规范及Node模块实现
May 17 Javascript
Vue应用部署到服务器的正确方式
Jul 15 Javascript
vue 通过下拉框组件学习vue中的父子通讯
Dec 19 Javascript
JS实现选项卡效果的代码实例
May 20 Javascript
小程序封装路由文件和路由方法(5种全解析)
May 26 Javascript
Vant+postcss-pxtorem 实现浏览器适配功能
Feb 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
php中3种方法删除字符串中间的空格
2014/03/10 PHP
php实现计数器方法小结
2015/01/05 PHP
php+flash+jQuery多图片上传源码分享
2020/07/27 PHP
php中bind_param()函数用法分析
2017/03/28 PHP
php 类中的常量、静态属性、非静态属性的区别
2017/04/09 PHP
JavaScript的变量作用域深入理解
2009/10/25 Javascript
jQuery删除节点的三个方法即remove()detach()和empty()
2013/12/27 Javascript
Flexigrid在IE下不显示数据的有效处理方法
2014/09/04 Javascript
nodejs创建web服务器之hello world程序
2015/08/20 NodeJs
详解JavaScript中localStorage使用要点
2016/01/13 Javascript
JavaScript驾驭网页-获取网页元素
2016/03/24 Javascript
使用重写url机制实现验证码换一张功能
2017/08/01 Javascript
react-router v4如何使用history控制路由跳转详解
2018/01/09 Javascript
利用vue.js把静态json绑定bootstrap的table方法
2018/08/28 Javascript
从零开始搭建vue移动端项目到上线的步骤
2018/10/15 Javascript
详解如何使用koa实现socket.io官网的例子
2018/11/04 Javascript
小程序实现自定义导航栏适配完美版
2019/04/02 Javascript
Layer.js实现表格溢出内容省略号显示,悬停显示全部的方法
2019/09/16 Javascript
JS浏览器BOM常见操作实例详解
2020/04/27 Javascript
[32:39]完美世界DOTA2联赛循环赛 Forest vs Inki BO2第一场 11.04
2020/11/04 DOTA
python比较两个列表大小的方法
2015/07/11 Python
python matplotlib 注释文本箭头简单代码示例
2018/01/08 Python
Python实现PS图像调整颜色梯度效果示例
2018/01/25 Python
Python实现仿射密码的思路详解
2020/04/23 Python
说说你所熟悉或听说过的j2ee中的几种常用模式?及对设计模式的一些看法
2012/05/24 面试题
应用电子专业学生的自我评价
2013/10/16 职场文书
医学类个人求职信范文
2014/02/05 职场文书
小学生检讨书大全
2014/02/06 职场文书
优秀教师工作感言
2014/02/16 职场文书
一岗双责责任书
2014/04/15 职场文书
齐云山导游词
2015/02/06 职场文书
2015年学习部工作总结范文
2015/03/31 职场文书
未婚证明范本
2015/06/15 职场文书
导游带团欢迎词
2015/09/30 职场文书
班主任班级管理心得体会
2016/01/07 职场文书
详解Vue的sync修饰符
2021/05/15 Vue.js