vue发送验证码倒计时

效果

  <el-form-item prop="verificationCode">
  	<el-input type="text" v-model="ruleForm.verificationCode" autocomplete="off" placeholder="验证码" class="verificationCode"></el-input>
  	<span class="getCode" @click="getCode()" v-show="show">获取验证码</span>
    <span v-show="!show" class="getCode">重新发送（{{count}}s）</span>
  </el-form-item>

 data () {
	  return{
	   	show: true,  // 初始启用按钮
	    count: 60,   // 初始化次数
	    timer: null,  
	  }
 }

       //倒计时
	_this.timer = setInterval(() => {
            if (_this.count > 0) {
            	 _this.show = false;
              _this.count--;
              console.log( _this.count)
            } else {
              _this.show = true;
              clearInterval(_this.timer);  // 清除定时器
              _this.timer = null;
              _this.count = 60;
            }
          }, 1000)