这篇文章主要讲解了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>

看完上述内容，是不是对vue实现倒计时获取验证码效果的方法有进一步的了解，如果还想学习更多内容，欢迎关注亿速云行业资讯频道。