基于vue的短信驗(yàn)證碼倒計(jì)時(shí)demo
最近做了一個(gè)小的demo,分享給大家,在很多地方都能用到。
一般獲取短信驗(yàn)證碼的時(shí)候會(huì)用到這個(gè)demo:
button里面包兩個(gè)span標(biāo)簽,根據(jù)點(diǎn)擊狀態(tài),顯示不同的span,關(guān)鍵代碼就是倒計(jì)時(shí):
<div id="example"> <button @click="send"> <span v-if="sendMsgDisabled">{{time+'秒后獲取'}}</span> <span v-if="!sendMsgDisabled">send</span> </button> </div>
button { width: 100px; height: 50px background: pink; }
var vm = new Vue({ el: '#example', data() { return { time: 60, // 發(fā)送驗(yàn)證碼倒計(jì)時(shí) sendMsgDisabled: false } }, methods: { send() { let me = this; me.sendMsgDisabled = true; let interval = window.setInterval(function() { if ((me.time--) <= 0) { me.time = 60; me.sendMsgDisabled = false; window.clearInterval(interval); } }, 1000); } } })
以上就是本文的全部?jī)?nèi)容,希望對(duì)大家的學(xué)習(xí)有所幫助,也希望大家多多支持腳本之家。
相關(guān)文章
Vue過(guò)渡效果之CSS過(guò)渡詳解(結(jié)合transition,animation,animate.css)
Vue 在插入、更新或者移除 DOM 時(shí),提供多種不同方式的應(yīng)用過(guò)渡效果。本文將從CSS過(guò)渡transition、CSS動(dòng)畫animation及配合使用第三方CSS動(dòng)畫庫(kù)(如animate.css)這三方面來(lái)詳細(xì)介紹Vue過(guò)渡效果之CSS過(guò)渡2020-02-02uniapp前端實(shí)現(xiàn)微信支付功能全過(guò)程(小程序、公眾號(hào)H5、app)
這篇文章主要介紹了uniapp前端實(shí)現(xiàn)微信支付功能的相關(guān)資料,通過(guò)uniapp開發(fā)跨平臺(tái)應(yīng)用時(shí),需要處理不同平臺(tái)的支付方式,包括微信小程序支付、公眾號(hào)H5支付和App支付,需要的朋友可以參考下2024-09-09一文詳解Pinia和Vuex與兩個(gè)Vue狀態(tài)管理模式
這篇文章主要介紹了一文詳解Pinia和Vuex與兩個(gè)Vue狀態(tài)管理模式,Pinia和Vuex一樣都是是vue的全局狀態(tài)管理器。其實(shí)Pinia就是Vuex5,只不過(guò)為了尊重原作者的貢獻(xiàn)就沿用了這個(gè)看起來(lái)很甜的名字Pinia2022-08-08vue全局自定義指令-元素拖拽的實(shí)現(xiàn)代碼
這篇文章主要介紹了面板拖拽之vue自定義指令,本文通過(guò)實(shí)例代碼給大家介紹的非常詳細(xì),具有一定的參考借鑒價(jià)值,需要的朋友可以參考下2019-04-04vue實(shí)現(xiàn)鼠標(biāo)移入移出事件代碼實(shí)例
這篇文章主要介紹了vue實(shí)現(xiàn)鼠標(biāo)移入移出事件,文中通過(guò)示例代碼介紹的非常詳細(xì),對(duì)大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價(jià)值,需要的朋友們下面隨著小編來(lái)一起學(xué)習(xí)學(xué)習(xí)吧2019-03-03vue實(shí)現(xiàn)PC端錄音功能的實(shí)例代碼
這篇文章主要介紹了vue實(shí)現(xiàn)PC端錄音功能的實(shí)例代碼,本文給大家介紹的非常詳細(xì),具有一定的參考借鑒價(jià)值,需要的朋友可以參考下2019-06-06vue-router結(jié)合vuex實(shí)現(xiàn)用戶權(quán)限控制功能
這篇文章主要介紹了vue-router結(jié)合vuex實(shí)現(xiàn)用戶權(quán)限控制功能,本文給大家介紹的非常詳細(xì),具有一定的參考借鑒價(jià)值,需要的朋友可以參考下2019-11-11解決vue 打包發(fā)布去#和頁(yè)面空白的問(wèn)題
今天小編就為大家分享一篇解決vue 打包發(fā)布去#和頁(yè)面空白的問(wèn)題,具有很好的參考價(jià)值,希望對(duì)大家有所幫助。一起跟隨小編過(guò)來(lái)看看吧2018-09-09