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 异步调用框架 (Part 3 - 代码实现)
Aug 04 Javascript
跨域传值即主页面与iframe之间互相传值
Dec 09 Javascript
AngularJS语法详解
Jan 23 Javascript
JQuery实现可直接编辑的表格
Apr 16 Javascript
js兼容火狐显示上传图片预览效果的方法
May 21 Javascript
全面解析Bootstrap中scrollspy(滚动监听)的使用方法
Jun 06 Javascript
BootStrap3中模态对话框的使用
Jan 06 Javascript
jQuery输入框密码的显示隐藏【代码分享】
Apr 29 jQuery
ionic App问题总结系列之ionic点击系统返回键退出App
Aug 19 Javascript
vue-router项目实战总结篇
Feb 11 Javascript
vue src动态加载请求获取图片的方法
Oct 17 Javascript
jsonp实现百度下拉框功能的方法分析
May 10 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/01/04 PHP
php session处理的定制
2009/03/16 PHP
php数组删除元素示例
2014/03/21 PHP
php实现可逆加密的方法
2015/08/11 PHP
PHP网站自动化配置的实现方法(必看)
2017/05/27 PHP
PHP基于PDO扩展操作mysql数据库示例
2018/12/24 PHP
PHP中迭代器的简单实现及Yii框架中的迭代器实现方法示例
2020/04/26 PHP
Javascript String对象扩展HTML编码和解码的方法
2009/06/02 Javascript
jquery 表单取值常用代码
2009/12/22 Javascript
jquery lazyload延迟加载技术的实现原理分析
2011/01/24 Javascript
兼容主流浏览器的iframe自适应高度js脚本
2014/01/10 Javascript
JS跨域问题详解
2014/11/25 Javascript
Bootstrap按钮下拉菜单组件详解
2016/05/10 Javascript
JavaScript中的Object对象学习教程
2016/05/20 Javascript
layui表格实现代码
2017/05/20 Javascript
微信小程序 页面跳转传值实现代码
2017/07/27 Javascript
原生js 封装get ,post, delete 请求的实例
2017/08/11 Javascript
详解JS函数stack size计算方法
2018/06/18 Javascript
vue组件开发props验证的实现
2019/02/12 Javascript
angular多语言配置详解
2019/05/16 Javascript
用云开发Cloudbase实现小程序多图片内容安全监测的代码详解
2020/06/07 Javascript
JavaScript实现下拉列表
2021/01/20 Javascript
vue登录页实现使用cookie记住7天密码功能的方法
2021/02/18 Vue.js
python内存管理分析
2015/04/08 Python
Python实现动态图解析、合成与倒放
2018/01/18 Python
django之自定义软删除Model的方法
2019/08/14 Python
python中的itertools的使用详解
2020/01/13 Python
巴西网上药房:onofre
2016/11/21 全球购物
AJAX应用和传统Web应用有什么不同
2013/08/24 面试题
兼职学生的自我评价
2013/11/24 职场文书
体育教育个人自荐信范文
2013/12/01 职场文书
最新奶茶店创业计划书
2014/01/25 职场文书
幼儿园大班毕业感言
2014/02/06 职场文书
学生会个人自荐书范文
2014/02/12 职场文书
四年大学自我鉴定
2014/02/17 职场文书
Win11使用CAD卡顿或者致命错误怎么办?Win11无法正常使用CAD的解决方法
2022/07/23 数码科技