vue中通過定時器設置倒計時，5秒倒計時

前言：有時候，在項目中，我們經常需要設置簡單的倒計時功能，這個可以通過定時器來實現。

一、設置div顯示倒計時數字

<div class="countCircle">
    <span>{{countdown}}</span>
</div>

二、JS中設置方法

export default{
    data(){
        countdown:'5',
        timer: null,
    },
    methods:{
        if(this.doCheck()){
            this.sendCode();  //觸發倒計時
        }
        //倒計時
        sendCode(){
            this.loading();  //啓動定時器
            this.timer = setInterval(() =>{
                 //創建定時器
                if(this.countdown === 1){
                    this.clearTimer();  //關閉定時器
                    this.skipStep();
                }else{
                    this.loading();
                }
            },1000);
        },
        loading(){
          //啓動定時器
          this.countdown--;  //定時器減1
        },
        clearTimer(){
           //清除定時器
           clearInterval(this.timer);
           this.timer = null;
        },
    },
};

   這樣，一個簡單的倒計時功能就做好了。

  參考博客：

         Vue中通過定時器製作簡單倒計時   https://www.cnblogs.com/xiaoxiaomini/p/12843448.html