簡單實現(xiàn)vue驗證碼60秒倒計時功能
更新時間：2017年10月11日 15:36:48 作者：mrhaoxiaojun
這篇文章主要為大家介紹了如何簡單實現(xiàn)vue驗證碼60秒倒計時功能，文中示例代碼介紹的非常詳細，具有一定的參考價值，感興趣的小伙伴們可以參考一下
本文實例為大家分享了vue驗證碼倒計時60秒的具體代碼，供大家參考，具體內(nèi)容如下
html
<span v-show="show" @click="getCode">獲取驗證碼</span>
<span v-show="!show" class="count">{{count}} s</span>
js
data(){
return {
show: true,
count: '',
timer: null,
}
},
methods:{
getCode(){
const TIME_COUNT = 60;
if (!this.timer) {
this.count = TIME_COUNT;
this.show = false;
this.timer = setInterval(() => {
if (this.count > 0 && this.count <= TIME_COUNT) {
this.count--;
} else {
this.show = true;
clearInterval(this.timer);
this.timer = null;
}
}, 1000)
}
}
}
更多關于倒計時的文章請查看專題：《倒計時功能》
更多JavaScript時鐘特效點擊查看：JavaScript時鐘特效專題
以上就是本文的全部內(nèi)容，希望對大家的學習有所幫助，也希望大家多多支持腳本之家。
相關文章
vue.js組件vue-waterfall-easy實現(xiàn)瀑布流效果
這篇文章主要為大家詳細介紹了vue.js實現(xiàn)瀑布流之vue-waterfall-easy的相關資料，文中示例代碼介紹的非常詳細，具有一定的參考價值，感興趣的小伙伴們可以參考一下2017-08-08
在本文里小編給大家整理的是關于vue項目中引入Sass的相關知識點內(nèi)容，有需要的朋友們可以測試參考下。2019-08-08
基于Vue?+?ElementUI實現(xiàn)可編輯表格及校驗
這篇文章主要給大家介紹了基于Vue?+?ElementUI?實現(xiàn)可編輯表格及校驗,文中有詳細的代碼講解和實現(xiàn)思路,講解的非常詳細,有需要的朋友可以參考下2023-08-08
Vue數(shù)據(jù)驅(qū)動表單渲染,輕松搞定form表單
這篇文章主要介紹了Vue數(shù)據(jù)驅(qū)動表單渲染,輕松搞定form表單,文中通過示例代碼介紹的非常詳細，對大家的學習或者工作具有一定的參考學習價值,需要的朋友可以參考下2019-07-07
vue2.0中click點擊當前l(fā)i實現(xiàn)動態(tài)切換class
本篇文章主要介紹了vue2.0中click點擊當前l(fā)i實現(xiàn)動態(tài)切換class ，小編覺得挺不錯的，現(xiàn)在分享給大家，也給大家做個參考。一起跟隨小編過來看看吧2017-06-06
這篇文章主要為大家詳細介紹了vue實現(xiàn)把頁面導出成word文件的方法,文中的實現(xiàn)步驟講解詳細,并且有詳細的代碼示例,需要的小伙伴可以參考一下2023-10-10
axios從功能上來說就是主要用于我們前端向后端發(fā)送請求,是基于http客戶端的promise,面向瀏覽器和nodejs,下面這篇文章主要給大家介紹了關于Vue2中使用axios的3種方法,需要的朋友可以參考下2022-09-09
這篇文章主要為大家詳細介紹了vue用BMap百度地圖實現(xiàn)即時搜索功能，文中示例代碼介紹的非常詳細，具有一定的參考價值，感興趣的小伙伴們可以參考一下2019-09-09
這篇文章主要介紹了Vuex的熱更替如何實現(xiàn)，文中通過示例代碼介紹的非常詳細，對大家的學習或者工作具有一定的參考學習價值，需要的朋友們下面隨著小編來一起學習學習吧2020-06-06
webpack dev-server代理websocket問題
這篇文章主要介紹了webpack dev-server代理websocket問題,具有很好的參考價值,希望對大家有所幫助,如有錯誤或未考慮完全的地方,望不吝賜教2024-08-08