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