<html lang="en">
  <head>
    <title>vue短信验证码倒计时</title>
    <meta charset="utf-8">
  <script src="js/vue.min.js"></script>
 </head>
  <body >
      <div id="app">
     <button v-show="verShow" @click="handleClick()">点击获取验证码</button>
     <button v-show="!verShow"><span>{{timer}}</span>秒后重新获取</button>
    </div>

<script>
        new Vue({
          el: '#app',
          data: {
            verShow:true,
            timer:60
          },
          methods: {
            handleClick(){
              this.verShow = false;
              var auth_timer = setInterval(()=>{
                this.timer--;
                if(this.timer<=0){
                  this.verShow = true;
                  clearInterval(auth_timer)
                }
              },1000)
            }
          }
        })
</script>

  </body>
</html>

Logo

前往低代码交流专区

更多推荐