这篇文章主要为大家详细介绍了vue实现倒计时获取验证码效果，文中示例代码介绍的非常详细，具有一定的参考价值，感兴趣的小伙伴们可以参考一下
本文实例为大家分享了vue实现倒计时获取验证码效果的具体代码，供大家参考，具体内容如下
效果：
代码：
<template> <div> <el-button :disabled="disabled" @click="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时钟特效专题
以上就是本文的全部内容，希望对大家的学习有所帮助，也希望大家多多支持脚本之家。
您可能感兴趣的文章: