Vue驗證碼60秒倒計時功能簡單實例代碼

<template>
 <div class='login'>
 <div class="loginHeader">
  <input type="tel" class="loginBtn border-bottom" placeholder="請輸入手機(jī)號" />
  <input type="tel" class="codeBtn" placeholder="請輸入驗證碼" />
  <input type="button" class="getNumber" v-model="codeMsg" @click="getCode" :disabled="codeDisabled" />
 </div>
 </div>
</template>

<script>
 export default {
 data() {
  return {
  // 是否禁用按鈕
  codeDisabled: false,
  // 倒計時秒數(shù)
  countdown: 60,
  // 按鈕上的文字
  codeMsg: '獲取驗證碼',
  // 定時器
  timer: null
  }
 },

 methods: {
  // 獲取驗證碼
  getCode() {
  // 驗證碼60秒倒計時
  if (!this.timer) {
   this.timer = setInterval(() => {
   if (this.countdown > 0 && this.countdown <= 60) {
    this.countdown--;
    if (this.countdown !== 0) {
    this.codeMsg = "重新發(fā)送(" + this.countdown + ")";
    } else {
    clearInterval(this.timer);
    this.codeMsg = "獲取驗證碼";
    this.countdown = 60;
    this.timer = null;
    this.codeDisabled = false;
    }
   }
   }, 1000)
  }
  }
 }
 }
</script>

<style>
.login{
 width: 100%;
 height: 100%;
 background: #F9F9F9;
 .loginHeader{
 padding: 0 10px;
 background: #fff;
 margin-top: 20px;
 overflow: hidden;
 .loginBtn{
  width: 100%;
  height: 42px;
  border: none;
  background: #fff;
  color: #444;
  border-radius: 4px;
  outline: none;
  padding-left: 3px;
  font-size: 1.4rem;
  box-sizing: border-box;
  -webkit-appearance:none;
 }
 .border-bottom{
  border-bottom: 1px solid #F3F3F3;
 }
 .codeBtn{
  width: 63%;
  height: 42px;
  border: none;
  background: #fff;
  color: #444;
  border-radius: 4px;
  float: left;
  outline: none;
  padding-left: 3px;
  font-size: 1.4rem;
  box-sizing: border-box;
  -webkit-appearance:none;
 }
 .getNumber{
  width: 35%;
  height: 36px;
  float: right;
  margin-top: 3px;
  border: 1px solid #09BB07;
  color: #09BB07;
  background: #fff;
  border-radius: 4px;
  outline: none;
  -webkit-appearance:none;
 }
 }
}
</style>