基于vue的短信驗證碼倒計時demo
更新時間：2017年09月13日 14:30:24 作者：AmberWu
這篇文章主要介紹了基于vue的短信驗證碼倒計時demo，小編覺得挺不錯的，現(xiàn)在分享給大家，也給大家做個參考。一起跟隨小編過來看看吧
最近做了一個小的demo，分享給大家，在很多地方都能用到。
一般獲取短信驗證碼的時候會用到這個demo：
button里面包兩個span標(biāo)簽，根據(jù)點擊狀態(tài)，顯示不同的span，關(guān)鍵代碼就是倒計時：
<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ā)送驗證碼倒計時
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-02
uniapp前端實現(xiàn)微信支付功能全過程(小程序、公眾號H5、app)
這篇文章主要介紹了uniapp前端實現(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)管理器。其實Pinia就是Vuex5，只不過為了尊重原作者的貢獻就沿用了這個看起來很甜的名字Pinia2022-08-08
這篇文章主要介紹了面板拖拽之vue自定義指令,本文通過實例代碼給大家介紹的非常詳細(xì)，具有一定的參考借鑒價值，需要的朋友可以參考下2019-04-04
這篇文章主要介紹了在Vue2和Vue3中如何使用watch偵聽器，分別對vue2及vue3作了詳細(xì)的說明，有需要的朋友可以借鑒參考下，希望能夠有所幫助2021-09-09
這篇文章主要介紹了vue實現(xiàn)鼠標(biāo)移入移出事件，文中通過示例代碼介紹的非常詳細(xì)，對大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價值，需要的朋友們下面隨著小編來一起學(xué)習(xí)學(xué)習(xí)吧2019-03-03
這篇文章主要介紹了vue實現(xiàn)PC端錄音功能的實例代碼，本文給大家介紹的非常詳細(xì)，具有一定的參考借鑒價值,需要的朋友可以參考下2019-06-06
vue-router結(jié)合vuex實現(xiàn)用戶權(quán)限控制功能
這篇文章主要介紹了vue-router結(jié)合vuex實現(xiàn)用戶權(quán)限控制功能，本文給大家介紹的非常詳細(xì)，具有一定的參考借鑒價值,需要的朋友可以參考下2019-11-11
這篇文章主要介紹了Vue3內(nèi)置組件Teleport使用方法，Teleport是Vue 3.0 新增的一個內(nèi)置組件，主要是為了解決一些特殊場景下模態(tài)對話框組件、組件的渲染，帶著些許的了解一起走進下面文章的詳細(xì)內(nèi)容吧2021-10-10
今天小編就為大家分享一篇解決vue 打包發(fā)布去#和頁面空白的問題，具有很好的參考價值，希望對大家有所幫助。一起跟隨小編過來看看吧2018-09-09