快捷導(dǎo)航

基于vue實(shí)現(xiàn)圖片驗(yàn)證碼倒計(jì)時(shí)60s功能

更新時(shí)間：2019年12月10日 09:28:16 作者：涼涼_570e

這篇文章主要介紹了基于vue實(shí)現(xiàn)圖片驗(yàn)證碼倒計(jì)時(shí)60s功能,本文通過截圖實(shí)例代碼的形式給大家介紹的非常詳細(xì)，具有一定的參考借鑒價(jià)值，需要的朋友可以參考下

1.基于VUE實(shí)現(xiàn)圖片驗(yàn)證碼

html:

   <div class="formItem pr">
       <img src="../../image/icon2.png" alt="">
       <input type="text" placeholder="請輸入驗(yàn)證碼">
       <img :src="IdentifyingCode" alt="圖文驗(yàn)證碼" class="IdentifyingCode" @click="updateIdentifyingCode(true)">
     </div>

js:

2.vue實(shí)現(xiàn)驗(yàn)證碼倒計(jì)時(shí)60s

html:

 <div class="formItem">
      <img src="../../image/icon2.png" alt="">
      <input type="text" placeholder="請輸入驗(yàn)證碼">
      <button class="button" type="button" name="button" @click="sendCode()" v-show="show">獲取驗(yàn)證碼</button>
      <button class="button codebtn" type="button" name="button" v-show="!show">{{sum}}s</button>
   </div>

js:

效果圖：

總結(jié)

以上所述是小編給大家介紹的基于vue實(shí)現(xiàn)圖片驗(yàn)證碼倒計(jì)時(shí)60s功能，希望對(duì)大家有所幫助，如果大家有任何疑問請給我留言，小編會(huì)及時(shí)回復(fù)大家的。在此也非常感謝大家對(duì)腳本之家網(wǎng)站的支持！
如果你覺得本文對(duì)你有幫助，歡迎轉(zhuǎn)載，煩請注明出處，謝謝！

您可能感興趣的文章:

相關(guān)文章

Vue2響應(yīng)式系統(tǒng)之嵌套
這篇文章主要介紹了Vue響應(yīng)式系統(tǒng)之嵌套，我們在開發(fā)中肯定存在組件嵌套組件的情況，下文將舉例說明情況，需要的小伙伴可以參考一下
2022-04-04
詳解Vue+elementUI build打包部署后字體圖標(biāo)丟失問題
這篇文章主要介紹了詳解Vue+elementUI build打包部署后字體圖標(biāo)丟失問題，文中通過示例代碼介紹的非常詳細(xì)，對(duì)大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價(jià)值，需要的朋友們下面隨著小編來一起學(xué)習(xí)學(xué)習(xí)吧
2020-07-07
Vue中使用Printjs插件實(shí)現(xiàn)打印功能
Print.js 主要是為了幫助我們直接在我們的應(yīng)用程序中打印 PDF 文件，無需離開界面，也無需使用嵌入，這篇文章主要介紹了Vue中使用Printjs插件實(shí)現(xiàn)打印功能,需要的朋友可以參考下
2022-08-08
vue3組合式API中setup()概念和reactive()函數(shù)的用法
這篇文章主要介紹了vue3組合式API中setup()概念和reactive()函數(shù)的用法,接下來的事件，我將帶著你從淺到深分析為什么我們需要學(xué)習(xí)組合式API以及我們的setup()函數(shù)作為入口函數(shù)的一個(gè)基本的使用方式，需要的朋友可以參考下
2023-03-03
一文詳解vue2的diff算法流程
本篇文章將會(huì)嘗試從算法的角度主要聊一聊vue2的diff策略,幫助讀者朋友在遇到相關(guān)的面試題時(shí)可以和面試官談笑風(fēng)生,文中有相關(guān)的圖解和代碼示例,感興趣的同學(xué)跟著小編一起來看看吧
2023-08-08
關(guān)于element-ui resetFields重置方法無效問題及解決
這篇文章主要介紹了關(guān)于element-ui resetFields重置方法無效問題及解決方案，具有很好的參考價(jià)值，希望對(duì)大家有所幫助。如有錯(cuò)誤或未考慮完全的地方，望不吝賜教
2022-08-08
vite與xcode環(huán)境變量配置記錄詳解
這篇文章主要為大家介紹了vite與xcode環(huán)境變量配置記錄詳解，有需要的朋友可以借鑒參考下，希望能夠有所幫助，祝大家多多進(jìn)步，早日升職加薪
2022-09-09
Vue中遍歷數(shù)組的新方法實(shí)例詳解
這篇文章主要介紹了Vue中遍歷數(shù)組的新方法,本文通過實(shí)例代碼給大家介紹的非常詳細(xì)，具有一定的參考借鑒價(jià)值，需要的朋友可以參考下
2019-07-07
vue中如何下載excel流文件及設(shè)置下載文件名
這篇文章主要介紹了vue中如何下載excel流文件及設(shè)置下載文件名，對(duì)vue感興趣的同學(xué)，可以參考下
2021-05-05
VueJs路由跳轉(zhuǎn)——vue-router的使用詳解
本篇文章主要介紹了VueJs路由跳轉(zhuǎn)——vue-router的使用，小編覺得挺不錯(cuò)的，現(xiàn)在分享給大家，也給大家做個(gè)參考。一起跟隨小編過來看看吧
2017-01-01