第一步
在当前的按钮中添加@click 事件,并在按钮内文字后面加上变量,并用v-if进行判断,看秒数是否大于0
![](https://i-blog.csdnimg.cn/blog_migrate/a44697f96e9ae82dcf6a795f917df476.png)
并且添加disabled,当second>0的时候给它disabled掉。
![](https://i-blog.csdnimg.cn/blog_migrate/eecd1954eaf043844f2f5a47916ecb27.png)
第二步
在data里将变量赋值为0,所以0肯定不会大于0,默认情况就是显示点击发送
![](https://i-blog.csdnimg.cn/blog_migrate/8f34337cef27b303b514bc1e3b0956eb.png)
第三步
将click事件的值传到方法里,然后添加一个setInterval,是一个实现定时调用的函数。并在里面进行判断,并且我们为当前的second赋一个值(秒数都可以),如果当前的秒数大于0的话,就一步步减去,每次减去为1000毫秒。
![](https://i-blog.csdnimg.cn/blog_migrate/0891221987110f599aec3208919b63db.png)
然后当我们点击按钮后,就会出现倒计时并且无法进行重复点击的操作,倒计时结束后就会变回一开始获取验证码时的样子,很实用。
![](https://i-blog.csdnimg.cn/blog_migrate/48f2b7f515957c9e029d777fd4e5d5dd.png)