最近在做一個Vue項目，前端通過手機號、驗證碼登錄，獲取驗證碼按鈕需要設置60s倒計時（點擊一次后，一分鐘內不得再次點擊）。先看一下效果圖：

輸入正確格式的手機號碼后，“獲取驗證碼”按鈕方可點擊；點擊“獲取驗證碼”后，按鈕進入60s倒計時，效果圖如下：

　效果圖已經有了，接下來就上代碼吧！

<el-button @click='getCode()' : :disabled='getCodeBtnDisable'>{{codeBtnWord}}</el-button> 數據data

data() { return {loginForm: { phoneNumber: ’’, verificationCode: ’’,},codeBtnWord: ’獲取驗證碼’, // 獲取驗證碼按鈕文字waitTime:61, // 獲取驗證碼按鈕失效時間 }} 計算屬性computed

computed: { // 用于校驗手機號碼格式是否正確 phoneNumberStyle(){let reg = /^1[3456789]d{9}$/if(!reg.test(this.loginForm.phoneNumber)){ return false}return true }, // 控制獲取驗證碼按鈕是否可點擊 getCodeBtnDisable:{get(){ if(this.waitTime == 61){if(this.loginForm.phoneNumber){ return false}return true } return true},// 注意：因為計算屬性本身沒有set方法，不支持在方法中進行修改，而下面我要進行這個操作，所以需要手動添加set(){} }}

關于上面給計算屬性添加set方法，可以參照//www.jb51.net/article/202496.htm

.el-button.disabled-style { background-color: #EEEEEE; color: #CCCCCC;} mothods中添加獲取驗證碼方法

getCode(){ if(this.phoneNumberStyle){let params = {}params.phone = this.loginForm.phoneNumber// 調用獲取短信驗證碼接口axios.post(’/sendMessage’,params).then(res=>{ res = res.data if(res.status==200) {this.$message({ message: ’驗證碼已發送，請稍候...’, type: ’success’, center:true}) }})// 因為下面用到了定時器，需要保存this指向let that = thisthat.waitTime--that.getCodeBtnDisable = truethis.codeBtnWord = `${this.waitTime}s 后重新獲取`let timer = setInterval(function(){ if(that.waitTime>1){that.waitTime--that.codeBtnWord = `${that.waitTime}s 后重新獲取` }else{clearInterval(timer)that.codeBtnWord = ’獲取驗證碼’that.getCodeBtnDisable = falsethat.waitTime = 61 }},1000) }}

通過上面的代碼，就可以實現了，如有錯誤，敬請指正！

以上就是Vue實現手機號、驗證碼登錄（60s禁用倒計時）的詳細內容，更多關于vue 手機號驗證碼登錄的資料請關注好吧啦網其它相關文章！