vue获取验证码

登录界面使用手机验证码注册登录很常见，VUE中实现获取验证码倒计时还是用到定时器setInterval

HTML部分

<div  class="login_list">   
 	<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);
        }
    }
})；