vue获取验证码

2019年10月16日

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)

}

}

}

html

1
2
<span v-show="show" @click="getCode">获取验证码</span>
<span v-show="!show" class="count">{{count}} s</span>

js

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
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)
      }
   
 }
登陆后查看全部内容