簡單實(shí)現(xiàn)vue驗(yàn)證碼60秒倒計(jì)時(shí)功能

更新時(shí)間：2017年10月11日 15:36:48 作者：mrhaoxiaojun

這篇文章主要為大家介紹了如何簡單實(shí)現(xiàn)vue驗(yàn)證碼60秒倒計(jì)時(shí)功能，文中示例代碼介紹的非常詳細(xì)，具有一定的參考價(jià)值，感興趣的小伙伴們可以參考一下

本文實(shí)例為大家分享了vue驗(yàn)證碼倒計(jì)時(shí)60秒的具體代碼，供大家參考，具體內(nèi)容如下

html

<span v-show="show" @click="getCode">獲取驗(yàn)證碼</span>
<span v-show="!show" class="count">{{count}} s</span>

 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)
  }
 } 
 }

更多關(guān)于倒計(jì)時(shí)的文章請查看專題：《倒計(jì)時(shí)功能》

更多JavaScript時(shí)鐘特效點(diǎn)擊查看：JavaScript時(shí)鐘特效專題

以上就是本文的全部內(nèi)容，希望對大家的學(xué)習(xí)有所幫助，也希望大家多多支持腳本之家。

您可能感興趣的文章:

相關(guān)文章

Vue項(xiàng)目中Api的組織和返回?cái)?shù)據(jù)處理的操作
這篇文章主要介紹了Vue項(xiàng)目中Api的組織和返回?cái)?shù)據(jù)處理的操作，本文給大家介紹的非常詳細(xì)，具有一定的參考借鑒價(jià)值,需要的朋友可以參考下
2019-11-11
在Vue項(xiàng)目中引入Echarts繪制K線圖的方法技巧
在Vue項(xiàng)目開發(fā)中,數(shù)據(jù)可視化是一項(xiàng)重要的任務(wù),Echarts是一個(gè)由百度開源的數(shù)據(jù)可視化庫,提供了豐富的圖表類型和強(qiáng)大的交互功能,其中,K線圖常用于展示金融數(shù)據(jù)的走勢,本文將詳細(xì)介紹如何在Vue項(xiàng)目中引入Echarts并繪制K線圖,需要的朋友可以參考下
2025-04-04
vue3路由router.push的使用以及問題分析
頁面跳轉(zhuǎn)有很多方法,本次使用的是?vue-router,但卻在使用?router.push?的時(shí)候遇到了點(diǎn)麻煩,所以記錄下來,希望可以幫助有需要的人
2023-09-09
vue動態(tài)添加背景圖簡單示例
這篇文章主要給大家介紹了關(guān)于vue動態(tài)添加背景圖的相關(guān)資料,在一些場景下我們需要使用戶可以進(jìn)行自定義背景圖片,文中通過示例代碼介紹的非常詳細(xì),需要的朋友可以參考下
2023-07-07
vue使用swiper插件實(shí)現(xiàn)垂直輪播圖
這篇文章主要介紹了vue使用swiper插件實(shí)現(xiàn)垂直輪播圖，具有很好的參考價(jià)值，希望對大家有所幫助。如有錯(cuò)誤或未考慮完全的地方，望不吝賜教
2023-01-01
Vue?仿QQ左滑刪除組件功能
前幾天朋友在做vue項(xiàng)目開發(fā)時(shí)，有人反映?IOS?上面的滑動點(diǎn)擊有點(diǎn)問題，讓我們來幫忙解決，于是我就重寫了代碼，下面把vue仿qq左滑刪除組件功能分享到腳本之家平臺，需要的朋友參考下吧
2018-03-03
vue.js封裝switch開關(guān)組件的操作
這篇文章主要介紹了vue.js封裝switch開關(guān)組件的操作，具有很好的參考價(jià)值，希望對大家有所幫助。一起跟隨小編過來看看吧
2020-10-10
Pure admin-Router標(biāo)簽頁配置與頁面持久化實(shí)現(xiàn)方法詳解
這篇文章主要介紹了Pure admin-Router標(biāo)簽頁配置與頁面持久化實(shí)現(xiàn)方法，文中通過示例代碼介紹的非常詳細(xì)，對大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價(jià)值，需要的朋友們下面隨著小編來一起學(xué)習(xí)吧
2023-01-01
Vue中v-for更新檢測的操作方法
v-for 指令需要使用 item in items 形式的特殊語法，其中 items 是源數(shù)據(jù)數(shù)組，而 item 則是被迭代的數(shù)組元素的別名。今天通過本文給大家介紹Vue中v-for更新檢測的操作方法，感興趣的朋友一起看看吧
2021-10-10
vue3+vite動態(tài)加載路由,本地路由和線上路由匹配方式
這篇文章主要介紹了vue3+vite動態(tài)加載路由,本地路由和線上路由匹配方式，具有很好的參考價(jià)值，希望對大家有所幫助。如有錯(cuò)誤或未考慮完全的地方，望不吝賜教
2023-06-06