原文链接：Vue – 01 – Vue验证码60秒倒计时

• template

  <template>
    <div class='login'>
      <div class="loginHeader">
        <input type="tel" class="loginBtn border-bottom" placeholder="请输入手机号" />
        <input type="tel" class="codeBtn" placeholder="请输入验证码" />
        <input type="button" class="getNumber" v-model="codeMsg" @click="getCode" :disabled="codeDisabled" />
      </div>
    </div>
  </template>
  

• script

  <script>
    export default {
      data() {
        return {
          // 是否禁用按钮
          codeDisabled: false,
          // 倒计时秒数
          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 = "重新发送(" + this.countdown + ")";
                } else {
                  clearInterval(this.timer);
                  this.codeMsg = "获取验证码";
                  this.countdown = 60;
                  this.timer = null;
                  this.codeDisabled = false;
                }
              }
            }, 1000)
          }
        }
      }
    }
  </script>
  

• css (scss写法)

  <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>