Vue實現獲取驗證碼倒計時


HTML部分:
<span v-show=“show” @click=“getCode”>獲取驗證碼

                    話不多說直接上干貨

 1 ```<span v-show="show" @click="getCode">獲取驗證碼</span>
 2    <span v-show="!show" class="count">{{count}} 秒</span>
 3 JS部分:
 4 data(){
 5   return {
 6    show: true,
 7    count: '',
 8    timer: null,
 9   }
10  },
11  methods:{
12    getCode(){
13      const TIME_COUNT = 60;
14      if (!this.timer) {
15        this.count = TIME_COUNT;
16        this.show = false;
17        this.timer = setInterval(() => {
18        if (this.count > 0 && this.count <= TIME_COUNT) {
19          this.count--;
20         } else {
21          this.show = true;
22          clearInterval(this.timer);
23          this.timer = null;
24         }
25        }, 1000)
26       }
27    } 
28  }

 


免責聲明!

本站轉載的文章為個人學習借鑒使用,本站對版權不負任何法律責任。如果侵犯了您的隱私權益,請聯系本站郵箱yoyou2525@163.com刪除。



 
粵ICP備18138465號   © 2018-2025 CODEPRJ.COM