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>

总结

以上所述是小编给大家介绍的Vue验证码60秒倒计时功能简单实例代码，希望对大家有所帮助，如果大家有任何疑问请给我留言，小编会及时回复大家的。在此也非常感谢大家对三水点靠木网站的支持！