移动端短信验证码详解（二）—— 倒计时

移动端短信验证码详解（一）
这一章，主要讲解倒计时的实现方法。
验证码发送倒计时一般为60秒，看代码

 <span v-if="show_btn" class="time1" @click="getCaptcha">点击重新发送span>
 <span class="time" v-else>{{count_down}}s重发span>

data () {
    return {
      count_down: null
      show_btn:false
    }
  },

v.count_down = 60
      // 定时器函数
      function doString () {
        if (v.count_down === 0) {
          clearInterval(hh)
          v.show_btn = true
        } else {
          v.count_down = v.count_down - 1
          v.show_btn = false
        }
      }
      let hh = setInterval(doString, 1000)

此处，判断的是当计时器为0时，清除计时器，当验证码为0时，此处的按钮变为点击重新发送如图所示，当点击这个按钮时，倒计时又重新开始

此处，说明一下我刚开始的错误写法及导致的后果
刚开始，我在页面中是这么写的

 <span v-if="count-down === 0" class="time1" @click="getCaptcha">点击重新发送span>
 <span class="time" v-else>{{count_down}}s重发span>

方法中是这么写的

v.count_down = 60
      // 定时器函数
      function doString () {
        if (v.count_down === 0) {
          clearInterval(hh)
        } else {
          v.count_down = v.count_down - 1
        }
      }
      let hh = setInterval(doString, 1000)

不知道你有没有猜想到，这样的后果是啥，那我告诉你，这样导致的后果是倒计时执行一次比一次快，，，当count-down=0时，按钮变成了点击重新发送，这怎么办呢？当然是让0显示完以后在变幻按钮，高人的解决办法在上面，希望你不要像我这么笨，嘿！
加油！奔跑着的小白！！！