基于vue的短信驗證碼倒計時demo
更新時間：2017年09月13日 14:30:24 作者：AmberWu
這篇文章主要介紹了基于vue的短信驗證碼倒計時demo，小編覺得挺不錯的，現(xiàn)在分享給大家，也給大家做個參考。一起跟隨小編過來看看吧
最近做了一個小的demo，分享給大家，在很多地方都能用到。
一般獲取短信驗證碼的時候會用到這個demo：
button里面包兩個span標簽，根據(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)容，希望對大家的學習有所幫助，也希望大家多多支持腳本之家。
相關(guān)文章
vue2+springsecurity權(quán)限系統(tǒng)的實現(xiàn)
本文主要介紹了vue2+springsecurity權(quán)限系統(tǒng)的實現(xiàn)，文中通過示例代碼介紹的非常詳細，對大家的學習或者工作具有一定的參考學習價值，需要的朋友們下面隨著小編來一起學習學習吧2023-05-05
這篇文章主要介紹了vue使用element-ui的el-image的問題分析,具有很好的參考價值,希望對大家有所幫助,如有錯誤或未考慮完全的地方,望不吝賜教2024-01-01
詳解vue-cli+element-ui樹形表格(多級表格折騰小計)
這篇文章主要介紹了vue-cli + element-ui 樹形表格（多級表格折騰小計），小編覺得挺不錯的，現(xiàn)在分享給大家，也給大家做個參考。一起跟隨小編過來看看吧2019-04-04
本篇文章主要介紹了淺談在vue項目中如何定義全局變量和全局函數(shù)，具有一定的參考價值，感興趣的小伙伴們可以參考一下2017-10-10
這篇文章主要為大家詳細介紹了vue實現(xiàn)帶放大鏡的搜索框，文中示例代碼介紹的非常詳細，具有一定的參考價值，感興趣的小伙伴們可以參考一下2021-08-08
這篇文章主要介紹了vue3基于script?setup語法$refs的使用，<BR>?在用vue3開發(fā)項目的時候，需要調(diào)用子組件的方法，于是想著用$refs來實現(xiàn)，但是我是使用script?setup語法糖，原先vue2的語法已經(jīng)不適用了。下面我們一起進入文章看詳細內(nèi)容吧</P><P>2021-12-12
這篇文章主要為大家詳細介紹了如何通過vue3和vite實現(xiàn)在線預覽pdf功能,文中的示例代碼簡潔易懂,具有一定的借鑒價值,感興趣的小伙伴可以學習一下2023-10-10
數(shù)據(jù)的重要性我們大家都知道，就算再小的項目中都可能使用幾個圖表展示，我最近在做項目的過程中也是需要用到圖表，最后選擇了echarts圖表庫2022-12-12
這篇文章主要為大家詳細匯總了Vue.js常用指令及使用方法，包括v-if、v-for、v-show、v-bind、v-on等指令,具有一定的參考價值，感興趣的小伙伴們可以參考一下2016-11-11
這篇文章主要介紹了vue3中的createApp分析,本文通過實例代碼給大家介紹的非常詳細，對大家的學習或工作具有一定的參考借鑒價值，需要的朋友可以參考下2023-04-04