コードのカウントダウン操作対象VUE

HTML //
 < INPUTの種類は= "番号" V-モデル= "にphoneNumber"   プレースホルダ= "電話番号を入力してください" /> 
< INPUTの種類= "番号" V-モデル= "phoneCode" プレースホルダ= "PINを入力してください" / > 
< スパンのスタイル= "色:#EA5504;" @click = "のsendMessage($イベント)" >認証コード送信</ スパン> 

//データの
データを:{ 
    にphoneNumber: ''、
    phoneCode: ''、

    NUM:60、
    カウント:    60 
} 

//方法
のsendMessage(要素){
                IF(this.phoneNumber == NULL || || this.phoneNumber未定義== '' == this.phoneNumber){ 
                    vant.Toast({位置: 'ボトム'、メッセージ: ''の電話番号を入力してください、時間: } 1000); 
                    返す; 
                } 
                ((/ ^ 1 [3456789] \ {D} 9 $ /テスト(this.phoneNumber)]。。)){IF 
                    vant.Toast({位置: 'ボトム'、メッセージ:「入力正しい電話番号」、DURATION:1000}); 
                    リターン; 
                } 
                VAR =、この; 
                IF(that.num> 0 && that.num < その.count){ 
                    返します。
                } 
                hであった=のsetInterval(関数(){ 
                    that.num = that.num -1。
                    element.target.innerHTML = that.num +の后重新获取' 
                    element.target.style.color = 'グレー'
                     element.target.disabled = '無効'
                     であれば(that.num === 0){ 
                        element.target .disabled = ''
                         element.target.style.color = ' #EA5504' 
                        element.target.innerHTML = '获取验证码'
                         てclearInterval(タイマー)
                    }  
                }、
            }    

 

おすすめ

転載: www.cnblogs.com/helloearth/p/11767210.html