这篇文章主要为大家介绍了如何简单实现vue验证码60秒倒计时功能,具有一定的参考价值,感兴趣的小伙伴们可以参考一下
HTML部分:
<
span
v-show
=
"show"
@
click
=
"getCode"
>获取验证码</
span
>
<
span
v-show
=
"!show"
class
=
"count"
>{{count}} s</
span
>
JS部分:
data(){
return
{
show:
true
,
count:
''
,
timer:
null
,
}
},
methods:{
getCode(){
const TIME_COUNT = 60;
if
(!
this
.timer) {
this
.count = TIME_COUNT;
this
.show =
false
;
this
.timer = setInterval(() => {
if
(
this
.count > 0 &&
this
.count <= TIME_COUNT) {
this
.count--;
}
else
{
this
.show =
true
;
clearInterval(
this
.timer);
this
.timer =
null
;
}
}, 1000)
}
}
}