Vue验证码60秒倒计时功能简单实例代码

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

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