VUE获取验证码倒计时

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

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);        }    }});