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秒倒計時功能簡單實例代碼，希望對大家有所幫助，如果大家有任何疑問請給我留言，小編會及時回復大家的。在此也非常感謝大家對錯新站長站網站的支持！