vue实现倒计时获取验证码效果

更新时间：2020年04月17日 15:57:28 作者：小羽向前跑

这篇文章主要为大家详细介绍了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时钟特效专题

以上就是本文的全部内容，希望对大家的学习有所帮助，也希望大家多多支持脚本之家。

您可能感兴趣的文章:

Vue弹窗组件的实现方法
这篇文章主要为大家详细介绍了Vue弹窗组件的实现方法，文中示例代码介绍的非常详细，具有一定的参考价值，感兴趣的小伙伴们可以参考一下
2022-09-09
vue使用canvas手写输入识别中文
这篇文章主要介绍了vue使用canvas手写输入识别中文，工作时遇到一些项目如：系统上的输入法使用不方便，客户要求做一个嵌入web网页的手写输入法。下面我们来看看文章得具体描述吧
2021-11-11
深入浅析Vue中的slots/scoped slots
这篇文章主要介绍了Vue中的slots/scoped slots,本文实例代码相结合的形式给大家介绍了slots的工作原理，需要的朋友可以参考下
2018-04-04
在IDEA中Debug调试VUE项目的详细步骤
idea竟然有一个神功能很多朋友都不是特别清楚，下面小编给大家带来了在IDEA中Debug调试VUE项目的详细步骤，感兴趣的朋友一起看看吧
2021-10-10
element-ui 中使用upload多文件上传只请求一次接口
这篇文章主要介绍了element-ui 中使用upload多文件上传只请求一次接口，文中通过示例代码介绍的非常详细，对大家的学习或者工作具有一定的参考学习价值，需要的朋友们下面随着小编来一起学习学习吧
2019-07-07
Vue路由传参详细介绍
这篇文章主要介绍了Vue路由传参的两种方式query和params,介绍了query和params区别与总结，结合示例代码给大家介绍的非常详细，需要的朋友可以参考下
2022-09-09
vue3中的ref()详解
ref对象可以通过.value属性进行修改，修改后的值也是响应式的，并且修改后会触发相关的副作用，这篇文章主要介绍了vue3中的ref(),需要的朋友可以参考下
2023-05-05
Vue Element前端应用开发之获取后端数据
这篇文章主要介绍了Vue Element前端应用开发之获取后端数据，对vue感兴趣的同学，可以参考下
2021-05-05
带你理解vue中的v-bind
如果你写过vue，对v-bind这个指令一定不陌生。下面小编将从源码层面去带大家剖析一下v-bind背后的原理,需要的小伙伴可以参考下面章的具体内容
2021-09-09
vue-loader教程介绍
本篇文章主要介绍了vue-loader教程介绍，vue-loader就是告诉webpack如何将vue格式的文件转换成js。有兴趣的可以了解一下
2017-06-06