登入介面使用手機驗證碼註冊登入很常見，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);
        }
    }
});