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文件Cookie存取值示例代码
Feb 20 Javascript
Jquery的基本对象转换和文档加载用法实例
Feb 25 Javascript
JavaScript中关于for循环删除数组元素内容时出现的问题
Nov 21 Javascript
JS焦点图,JS 多个页面放多个焦点图的实例
Dec 08 Javascript
js获取json中key所对应的value值的简单方法
Jun 17 Javascript
JS操作xml对象转换为Json对象示例
Mar 25 Javascript
Angular.js实现动态加载组件详解
May 28 Javascript
Vue利用路由钩子token过期后跳转到登录页的实例
Oct 26 Javascript
基于vue 开发中出现警告问题去除方法
Jan 25 Javascript
Vue.directive()的用法和实例详解
Mar 04 Javascript
elementUi vue el-radio 监听选中变化的实例代码
Jun 28 Javascript
vue使用i18n实现国际化的方法详解
Sep 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 强制性文件下载功能的函数代码(任意文件格式)
2010/05/26 PHP
php设计模式 Strategy(策略模式)
2011/06/26 PHP
php无限分类且支持输出树状图的详细介绍
2013/06/19 PHP
linux实现php定时执行cron任务详解
2013/12/24 PHP
php简单实现多字节字符串翻转的方法
2015/03/31 PHP
详解 PHP加密解密字符串函数附源码下载
2015/12/18 PHP
jQuery 创建Dom元素
2010/05/07 Javascript
jquery随机展示头像代码
2011/12/21 Javascript
来自国外的30个基于jquery的Web下拉菜单
2012/06/22 Javascript
JQuery each打印JS对象的方法
2013/11/13 Javascript
在线一元二次方程计算器实例(方程计算器在线计算)
2013/12/22 Javascript
将中国标准时间转换成标准格式的代码
2014/03/20 Javascript
基于javascript的JSON格式页面展示美化方法
2014/07/02 Javascript
jQuery Validate插件实现表单强大的验证功能
2015/12/18 Javascript
详解打造 Vue.js 可复用组件
2017/03/24 Javascript
vue中vee validate表单校验的几种基本使用
2018/06/25 Javascript
jQuery.extend 与 jQuery.fn.extend的用法及区别实例分析
2018/07/25 jQuery
使用jQuery mobile NuGet让你的网站在移动设备上同样精彩
2019/06/18 jQuery
在vue中axios设置timeout超时的操作
2020/09/04 Javascript
Python字符串替换实例分析
2015/05/11 Python
Python实现的用户登录系统功能示例
2018/02/05 Python
python按综合、销量排序抓取100页的淘宝商品列表信息
2018/02/24 Python
Python求解任意闭区间的所有素数
2018/06/10 Python
python中强大的format函数实例详解
2018/12/05 Python
Python随机函数库random的使用方法详解
2019/08/21 Python
Python3.6 + TensorFlow 安装配置图文教程(Windows 64 bit)
2020/02/24 Python
详解python模块pychartdir安装及导入问题
2020/10/22 Python
Python WebSocket长连接心跳与短连接的示例
2020/11/24 Python
丹麦优惠购物网站:PLUSSHOP
2019/03/24 全球购物
英国玛莎百货澳大利亚:Marks & Spencer Australia
2019/08/30 全球购物
大学生怎样写好自荐信
2014/02/25 职场文书
环保建议书600字
2014/05/14 职场文书
干部个人对照检查材料
2014/08/25 职场文书
2014年审计人员工作总结
2014/12/19 职场文书
通知函的格式
2015/04/27 职场文书
Python中seaborn库之countplot的数据可视化使用
2021/06/11 Python