基于vue的短信驗(yàn)證碼倒計(jì)時demo
最近做了一個小的demo,分享給大家,在很多地方都能用到。
一般獲取短信驗(yàn)證碼的時候會用到這個demo:
button里面包兩個span標(biāo)簽,根據(jù)點(diǎn)擊狀態(tài),顯示不同的span,關(guān)鍵代碼就是倒計(jì)時:
<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ì)時 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); } } })
以上就是本文的全部內(nèi)容,希望對大家的學(xué)習(xí)有所幫助,也希望大家多多支持腳本之家。
相關(guān)文章
Vue過渡效果之CSS過渡詳解(結(jié)合transition,animation,animate.css)
Vue 在插入、更新或者移除 DOM 時,提供多種不同方式的應(yīng)用過渡效果。本文將從CSS過渡transition、CSS動畫animation及配合使用第三方CSS動畫庫(如animate.css)這三方面來詳細(xì)介紹Vue過渡效果之CSS過渡2020-02-02uniapp前端實(shí)現(xiàn)微信支付功能全過程(小程序、公眾號H5、app)
這篇文章主要介紹了uniapp前端實(shí)現(xiàn)微信支付功能的相關(guān)資料,通過uniapp開發(fā)跨平臺應(yīng)用時,需要處理不同平臺的支付方式,包括微信小程序支付、公眾號H5支付和App支付,需要的朋友可以參考下2024-09-09一文詳解Pinia和Vuex與兩個Vue狀態(tài)管理模式
這篇文章主要介紹了一文詳解Pinia和Vuex與兩個Vue狀態(tài)管理模式,Pinia和Vuex一樣都是是vue的全局狀態(tài)管理器。其實(shí)Pinia就是Vuex5,只不過為了尊重原作者的貢獻(xiàn)就沿用了這個看起來很甜的名字Pinia2022-08-08vue全局自定義指令-元素拖拽的實(shí)現(xiàn)代碼
這篇文章主要介紹了面板拖拽之vue自定義指令,本文通過實(shí)例代碼給大家介紹的非常詳細(xì),具有一定的參考借鑒價值,需要的朋友可以參考下2019-04-04vue實(shí)現(xiàn)鼠標(biāo)移入移出事件代碼實(shí)例
這篇文章主要介紹了vue實(shí)現(xiàn)鼠標(biāo)移入移出事件,文中通過示例代碼介紹的非常詳細(xì),對大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價值,需要的朋友們下面隨著小編來一起學(xué)習(xí)學(xué)習(xí)吧2019-03-03vue實(shí)現(xiàn)PC端錄音功能的實(shí)例代碼
這篇文章主要介紹了vue實(shí)現(xiàn)PC端錄音功能的實(shí)例代碼,本文給大家介紹的非常詳細(xì),具有一定的參考借鑒價值,需要的朋友可以參考下2019-06-06vue-router結(jié)合vuex實(shí)現(xiàn)用戶權(quán)限控制功能
這篇文章主要介紹了vue-router結(jié)合vuex實(shí)現(xiàn)用戶權(quán)限控制功能,本文給大家介紹的非常詳細(xì),具有一定的參考借鑒價值,需要的朋友可以參考下2019-11-11