简单实现vue验证码60秒倒计时功能

 <p v-show="sendCode" @click="ObtainCode()" >获取验证码</p>
 <P v-show="!sendCode">{{authTime}} S</P>

export default {
  name: 'register',
  components: { Header },
  data () {
      sendCode: true, // 控制发送验证码按钮显示
      authTime: 0, // 倒计时
    }
  },
  methods: {
    /**
     * 获取验证码
     */
    ObtainCode () {
      /*  if (isNull(this.registerInfo.telephone)) {
        Toast('请填写手机号')
        return
      } else if (!utilsService.verificationPhone(this.registerInfo.telephone)) {
        Toast('手机号输入有误')
        return
      } 验证手机号是否输入*/ 
      this.sendCode = false  // 控制显示隐藏
      this.authTime = 60
      let timeInt = setInterval(() => {
        this.authTime--
        if (this.authTime <= 0) {
          this.sendCode = true
          window.clearInterval(timeInt)
        }
      }, 1000)
    },
 
  }
}