获取验证码计时器

image.png

HTML部分

<div  class="login_list">
    <span class="login_title">短信验证码：</span>
    <input class="auth_input" type="text"  placeholder="输入验证码" />
    /*上面两行可忽略*/
    /*
    * 下面两行是本次重点，通过v-show来控制该显示哪一行
    * 首先显示.auth_text_blue 通过点击事件getAuthCode来获取手机验证码。
    * 同时改变sendAuthCode的值，隐藏自身，显示倒计时.auth_text
    * 
    */
    <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>

JS部分

var vm = new Vue({
    el: ".vueBox",
    data: {
        sendAuthCode:true,/*布尔值，通过v-show控制显示‘获取按钮’还是‘倒计时’ */
        auth_time: 0, /*倒计时 计数器*/
    },
    methods: {
        getAuthCode:function () {
            this.sendAuthCode = false;
            this.auth_time = 6;
            var auth_timetimer =  setInterval(()=>{
                this.auth_time--;
                if(this.auth_time<=0){
                    this.sendAuthCode = true;
                    clearInterval(auth_timetimer);
                }
            }, 1000);
        }
    }
});

转自https://blog.csdn.net/wangqin2734/article/details/78718081