vue实现获短信验证码倒计时

版权声明：博客知识产权来源命运的信徒，切勿侵权 https://blog.csdn.net/qq_37591637/article/details/89914320

我的qq  2038373094

首先来看一下效果

 jsp页面

 <div  class="vueBox" >
    <span class="login_title">短信验证码：</span>
    <input class="auth_input" type="text"  placeholder="输入验证码" />
    <span v-show="sendAuthCode" class="auth_text auth_text_blue"  @click="getAuthCode">获取验证码</span>
    <span v-show="!sendAuthCode" class="auth_text"> <span class="auth_text_blue">{{auth_time}} </span> 秒之重新发送验证码</span> 
</div>
  <script src="js/jquery-3.3.1.min.js"></script>
  <script src="https://cdn.staticfile.org/vue/2.2.2/vue.min.js"></script>
<script src="js/regedit.js"></script>

js代码

var vm = new Vue({
	el: ".vueBox",
	data: { 
		sendAuthCode:true,
		auth_time:0 }, 
        methods: { 
        	getAuthCode:function () { 
        		this.sendAuthCode = false;
        		this.auth_time=6;
        		var at = setInterval(()=>{
        			this.auth_time--;
                if(this.auth_time<=0){
                    this.sendAuthCode = true;
                    clearInterval(at);
                }
            }, 1000);
        }
    }
});