vue 获取验证码倒计时

html部分

     
codeText按钮上显示的文字;
getCode为按钮点击事件;
codeVer为验证码;
showBtnOn:是否添加button上的class on

css部分,按钮点击的时候给一个灰色背景:

.form-code button.on{background-color:#999}

在date中定义双向绑定的部分

data: {
  howBtnOn:false,
  codeVer:'',
  codeText:'获取验证码'
},    

点击方法getCode开始倒计时:

var time = 60;
var timer = setInterval(function(){
  time--;
  vm.codeText = time+"秒重发"
  vm.showBtnOn = true;
  
  //time==0 时,倒计时结束,按钮切换为原来的颜色,清除定时器
  if(time==0){     clearInterval(timer);     vm.codeText = "获取验证码";     vm.showBtnOn = false;   } },1000);

  

你可能感兴趣的:(vue 获取验证码倒计时)