简单实现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)
},

}
}