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

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

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

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

html:

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

js:

2.vue實現(xiàn)驗證碼倒計時60s

html:

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

js:

效果圖：

總結(jié)

以上所述是小編給大家介紹的基于vue實現(xiàn)圖片驗證碼倒計時60s功能，希望對大家有所幫助，如果大家有任何疑問請給我留言，小編會及時回復(fù)大家的。在此也非常感謝大家對腳本之家網(wǎng)站的支持！
如果你覺得本文對你有幫助，歡迎轉(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ì)，對大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價值，需要的朋友們下面隨著小編來一起學(xué)習(xí)學(xué)習(xí)吧
2020-07-07
Vue中使用Printjs插件實現(xiàn)打印功能
Print.js 主要是為了幫助我們直接在我們的應(yīng)用程序中打印 PDF 文件，無需離開界面，也無需使用嵌入，這篇文章主要介紹了Vue中使用Printjs插件實現(xiàn)打印功能,需要的朋友可以參考下
2022-08-08
vue3組合式API中setup()概念和reactive()函數(shù)的用法
這篇文章主要介紹了vue3組合式API中setup()概念和reactive()函數(shù)的用法,接下來的事件，我將帶著你從淺到深分析為什么我們需要學(xué)習(xí)組合式API以及我們的setup()函數(shù)作為入口函數(shù)的一個基本的使用方式，需要的朋友可以參考下
2023-03-03
一文詳解vue2的diff算法流程
本篇文章將會嘗試從算法的角度主要聊一聊vue2的diff策略,幫助讀者朋友在遇到相關(guān)的面試題時可以和面試官談笑風(fēng)生,文中有相關(guān)的圖解和代碼示例,感興趣的同學(xué)跟著小編一起來看看吧
2023-08-08
關(guān)于element-ui resetFields重置方法無效問題及解決
這篇文章主要介紹了關(guān)于element-ui resetFields重置方法無效問題及解決方案，具有很好的參考價值，希望對大家有所幫助。如有錯誤或未考慮完全的地方，望不吝賜教
2022-08-08
vite與xcode環(huán)境變量配置記錄詳解
這篇文章主要為大家介紹了vite與xcode環(huán)境變量配置記錄詳解，有需要的朋友可以借鑒參考下，希望能夠有所幫助，祝大家多多進(jìn)步，早日升職加薪
2022-09-09
Vue中遍歷數(shù)組的新方法實例詳解
這篇文章主要介紹了Vue中遍歷數(shù)組的新方法,本文通過實例代碼給大家介紹的非常詳細(xì)，具有一定的參考借鑒價值，需要的朋友可以參考下
2019-07-07
vue中如何下載excel流文件及設(shè)置下載文件名
這篇文章主要介紹了vue中如何下載excel流文件及設(shè)置下載文件名，對vue感興趣的同學(xué)，可以參考下
2021-05-05
VueJs路由跳轉(zhuǎn)——vue-router的使用詳解
本篇文章主要介紹了VueJs路由跳轉(zhuǎn)——vue-router的使用，小編覺得挺不錯的，現(xiàn)在分享給大家，也給大家做個參考。一起跟隨小編過來看看吧
2017-01-01