Vue は検証コードのカウントダウンボタンを実装します

<div v-bind:class="{ 'text_email': isActive, 'text_tip': isTip }">{{tip}}</div> //エラープロンプト<div class="input">
    <i class="ret_icon-email"></i>
    <入力 
      タイプ="テキスト" 
      v-model="メール" 
      v-bind:class="{ 'input_email0' : hasError }" 
      v-on:click="キャンセルエラー" 
      :placeholder="メールアドレスを入力してください" 
      id="入力メールアドレス"
    />
    <br />
    <input type="text" placeholder="認証コードを入力" class="input_number" />
    <button class="btn_number" v-bind:class="{gray:wait_timer>0}" @click="getCode()">
        <span 
          クラス="num_green" 
          v-show="表示数" 
          v-bind:class="{num:wait_timer>0}"
        >{{this.wait_timer + "s"}}</span>
        <span 
          クラス="span_number" 
          v-bind:class="{gray_span:wait_timer>0}"
        >{{ getCodeText() }}</span>
    </ボタン>
    <br />
</div>

データ（） {
    戻る {
      ヒント: 「電子メールでパスワードを取得する」
      isTip: false、
      isActive: 真、
      表示数: 偽、
      wait_timer: 偽、
      hasError: false、
      メールアドレス: ""
    }
},
メソッド: {
    キャンセルエラー: 関数(イベント) {
      this.hasError = false;
      this.isActive = true;
      this.isTip = false;
      this.tip = "電子メールでパスワードを取得する";
    },
    取得コード: 関数() {
      （this.wait_timer > 0）の場合{
        false を返します。
      }
      if (!this.email) {
        this.hasError = true;
        this.isActive = false;
        this.isTip = true;
        this.tip = "メールアドレスは空欄にできません";
        false を返します。
      }
      もし （
        !/^([a-zA-Z0-9]+[_|\_|\.]?)*[a-zA-Z0-9]+@([a-zA-Z0-9]+[_|\_|\.]?)*[a-zA-Z0-9]+\.[a-zA-Z]{2,3}$/.test(
          このメール
        ）
      ）{
        this.hasError = true;
        this.isActive = false;
        this.isTip = true;
        this.tip = "メールアドレスが無効です";
        false を返します。
      }
      this.showNum = true;
      this.wait_timer = 120;
      var that = this;
      var timer_interval = setInterval(関数() {
        if (that.wait_timer > 0) {
          that.wait_timer--;
        } それ以外 {
          タイマー間隔をクリアします。
        }
      }, 1000);

      //ここでAjaxを呼び出して検証コードを取得します
    },
    getCodeText: 関数() {
      （this.wait_timer > 0）の場合{
        「送信済み」を返します。
      }
      （this.wait_timer === 0）の場合{
        this.showNum = false;
        「確認コードを再送信してください！」を返します。
      }
      this.wait_timer が false の場合
        return "確認コードを送信してください！";
      }
    },
}

.ret_icon-メール{
  background: url(../../assets/pics/email.svg) no-repeat; //画像はローカル画像です width: 20px;
  高さ: 20px;
  位置: 絶対;
  上: 12px;
  左: 16px;
}
.input_email0 {
  境界線: 1px実線 rgba(239, 83, 80, 1);
}
.入力番号{
  幅: 112ピクセル;
  高さ: 44px;
  テキストインデント: 16px;
  右マージン: 12px;
}
.btn_番号 {
  幅: 154ピクセル;
  高さ: 44px;
  境界線の半径: 4px;
  ボックスのサイズ: 境界線ボックス;
  境界線: 1px実線 rgba(76, 175, 80, 1);
  行の高さ: 16px;
  アウトライン: なし;
}
.span_number {
  色: rgba(76, 175, 80, 1);
}
.btn_number.gray {
  背景: rgba(242, 244, 245, 1);
  境界線: 1px実線 rgba(0, 0, 0, 0.05);
}
.span_number.gray_span {
  色: #9a9c9a;
}
.nu​​m_green.num {
  色: rgba(76, 175, 80, 1);
}