写个验证码倒计时 Vue

上代码

页面上写个获取验证码的按钮

    <div @click="getCode()" :class="{ 'textGrey' : isGrey }">
      获得验证码{{countShow}}
    </div>

写一个textGrey的class属性 变成灰色

  .textGrey {
    color: #ddd
  }

  数据初始化

 data() {
      return {
        count: '',
        countShow: '',
        timer: null,
        isGrey: false
      }
 }

按钮绑定方法

  methods: {
    getCode() {
      if (this.isGrey === false) {
        this.isGrey = true
        //验证码倒计时30s
        const TIME_COUN2= 30
        if (!this.timer) {
          this.count = TIME_COUNT
          this.timer = setInterval(() => {
            if (this.count > 0 && this.count <= TIME_COUNT) {
              this.count --
              this.countShow = this.count + 's'
            } else {
              clearInterval(this.timer)
              this.timer = null
              this.count = ''
              this.countShow = ''
              this.isGrey = false
            }
          }, 1000)  
        } 
      }
    }
  }

可以了。