vue發(fā)送驗(yàn)證碼計(jì)時(shí)器防止刷新實(shí)現(xiàn)詳解
更新時(shí)間：2023年03月09日 10:59:28 作者：藍(lán)色海島
這篇文章主要為大家介紹了vue發(fā)送驗(yàn)證碼計(jì)時(shí)器防止刷新實(shí)現(xiàn)詳解，<BR>有需要的朋友可以借鑒參考下，希望能夠有所幫助，祝大家多多進(jìn)步，早日升職加薪
基本實(shí)現(xiàn)效果
按鈕：
<t-button @click="handleSend" :disabled="disable">{{text}}</t-button>
data：
text: '發(fā)送驗(yàn)證碼',
time: 10,
timer: null,
disable: false
點(diǎn)擊發(fā)送：
handleSend() {
this.disable = true
this.text = this.time + 's后重新發(fā)送'
this.timer = setInterval(() => {
if (this.time > 0) {
this.time--
this.text = this.time + 's后重新發(fā)送'
} else {
clearInterval(this.timer)
this.time = 10
this.disable = false
this.text = '重新發(fā)送'
}
}, 1000)
}
防止刷新
handleSend() {
this.disable = true
this.text = this.time + 's后重新發(fā)送'
this.timer = setInterval(() => {
if (this.time > 0) {
this.time--
this.text = this.time + 's后重新發(fā)送'
localStorage.setItem('time', this.time) // 注意這行
} else {
clearInterval(this.timer)
this.time = 10
this.disable = false
this.text = '重新發(fā)送'
}
}, 1000)
}
created() {
const time = localStorage.getItem('time')
if (time && time > 0) {
this.text = time + 's后重新發(fā)送'
this.time = time
this.handleSend()
}
}以上就是vue發(fā)送驗(yàn)證碼計(jì)時(shí)器防止刷新實(shí)現(xiàn)詳解的詳細(xì)內(nèi)容，更多關(guān)于vue發(fā)送驗(yàn)證碼計(jì)時(shí)器防止刷新的資料請(qǐng)關(guān)注腳本之家其它相關(guān)文章！
相關(guān)文章
使用electron打包Vue前端項(xiàng)目的詳細(xì)流程
這篇文章主要介紹了使用electron打包Vue前端項(xiàng)目的詳細(xì)流程,文中通過圖文結(jié)合的方式給大家介紹的非常詳細(xì),對(duì)大家學(xué)習(xí)electron打包Vue有一定的幫助,需要的朋友可以參考下2024-04-04
這篇文章主要為大家詳細(xì)介紹了vue文件樹組件的使用方法，文中示例代碼介紹的非常詳細(xì)，具有一定的參考價(jià)值，感興趣的小伙伴們可以參考一下2018-03-03
vue 關(guān)閉瀏覽器窗口的時(shí)候,清空localStorage的數(shù)據(jù)示例
今天小編就為大家分享一篇vue 關(guān)閉瀏覽器窗口的時(shí)候,清空localStorage的數(shù)據(jù)示例，具有很好的參考價(jià)值，希望對(duì)大家有所幫助。一起跟隨小編過來看看吧2019-11-11
el-select 數(shù)據(jù)回顯,只顯示value不顯示lable問題
這篇文章主要介紹了el-select 數(shù)據(jù)回顯,只顯示value不顯示lable問題，具有很好的參考價(jià)值，希望對(duì)大家有所幫助。如有錯(cuò)誤或未考慮完全的地方，望不吝賜教2022-09-09
vue的表單數(shù)據(jù)收集案例之基本指令和自定義指令詳解
收集表單數(shù)據(jù)可以使用這個(gè)v-model實(shí)現(xiàn)這個(gè)數(shù)據(jù)的綁定，但是在有些輸入框中，還需要一些其他的指令搭配這個(gè)v-model指令結(jié)合使用，這篇文章主要介紹了vue的表單數(shù)據(jù)收集，基本指令和自定義指令,需要的朋友可以參考下2023-01-01
這篇文章主要介紹了基于ant design日期控件使用_僅月份的操作，具有很好的參考價(jià)值，希望對(duì)大家有所幫助。一起跟隨小編過來看看吧2020-10-10
淺談Vue3 Composition API如何替換Vue Mixins
這篇文章主要介紹了淺談Vue3 Composition API如何替換Vue Mixins，文中通過示例代碼介紹的非常詳細(xì)，對(duì)大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價(jià)值，需要的朋友們下面隨著小編來一起學(xué)習(xí)學(xué)習(xí)吧2020-04-04
這篇文章主要為大家介紹了Vue vxe-table使用問題收錄小結(jié),有需要的朋友可以借鑒參考下,希望能夠有所幫助,祝大家多多進(jìn)步,早日升職加薪2023-09-09
vue-cli項(xiàng)目中img如何使用require動(dòng)態(tài)獲取圖片
這篇文章主要介紹了vue-cli項(xiàng)目中img如何使用require動(dòng)態(tài)獲取圖片，具有很好的參考價(jià)值，希望對(duì)大家有所幫助。2022-09-09
vue中computed和watch的使用實(shí)例代碼解析
這篇文章主要介紹了vue中computed和watch的綜合運(yùn)用實(shí)例,主要需求是點(diǎn)擊按鈕實(shí)現(xiàn)天氣的切換效果結(jié)合示例代碼給大家介紹的非常詳細(xì)，需要的朋友可以參考下2022-04-04