Detailed explanation of the implementation of vue sending verification code timer to prevent refresh

Basic effect

Button:

          <t-button @click="handleSend" :disabled="disable">{{text}}</t-button>

data：

      text: 'Send verification code',
      time: 10,
      timer: null,
      disable: false

Click to send:

    handleSend() {
       = true
       =  + 'S resend'
       = setInterval(() =&gt; {
        if ( &gt; 0) {
          --
           =  + 'S resend'
        } else {
          clearInterval()
           = 10
           = false
           = 'Resend'
        }
      }, 1000)
    }

Prevent refresh

    handleSend() {
       = true
       =  + 'S resend'
       = setInterval(() =&gt; {
        if ( &gt; 0) {
          --
           =  + 'S resend'
          ('time', ) // Pay attention to this line        } else {
          clearInterval()
           = 10
           = false
           = 'Resend'
        }
      }, 1000)
    }

  created() {
    const time = ('time')
    if (time &amp;&amp; time &gt; 0) {
       = time + 'S resend'
       = time
      ()
    }
  }

The above is the detailed explanation of the implementation of the vue sending verification code timer to prevent refresh. For more information about the vue sending verification code timer to prevent refresh, please pay attention to my other related articles!