vue驗(yàn)證碼組件應(yīng)用實(shí)例
代碼如下:
<template> <div class="join_formitem"> <label class="enquiry">驗(yàn)證碼<span>:</span></label> <div class="captcha"> <input type="text" placeholder="請輸入驗(yàn)證碼" class="verification_input" v-model="picVerification" /> <input type="button" @click="createdCode" class="verification" v-model="checkCode" /> </div> </div> </template> <script> export default { data(){ return{ code:'', checkCode:'', picVerification:'' //..驗(yàn)證碼圖片 } }, created(){ this.createdCode() }, methods: { // 圖片驗(yàn)證碼 createdCode(){ // 先清空驗(yàn)證碼輸入 this.code = "" this.checkCode = "" this.picVerification = "" // 驗(yàn)證碼長度 const codeLength = 4 // 隨機(jī)數(shù) const random = new Array(0,1,2,3,4,5,6,7,8,9,'A','B','C','D','E','F','G','H','I','J','K','L','M','N','O','P','Q','R','S','T','U','V','W','X','Y','Z') for(let i = 0;i < codeLength;i++){ // 取得隨機(jī)數(shù)的索引(0~35) let index = Math.floor(Math.random() * 36) // 根據(jù)索引取得隨機(jī)數(shù)加到code上 this.code += random[index] } // 把code值賦給驗(yàn)證碼 this.checkCode = this.code } } } </script> <style> .verification_input{ font-family: 'Exo 2',sans-serif; border: 1px solid #fff; color: black; outline: none; border-radius: 12px; letter-spacing: 1px; font-size: 17px; font-weight: normal; background-color: rgba(82,56,76,.15); padding: 5px 0 5px 10px; margin-left: 30px; height: 30px; margin-top: 25px; border: 1px solid #e6e6e6; } .verification{ border-radius: 12px; width: 100px; letter-spacing: 5px; margin-left: 50px; height: 40px; transform: translate(-15px,0); } .captcha{ height:50px; text-align: justify; } </style>
總結(jié)
以上就是這篇文章的全部內(nèi)容了,希望本文的內(nèi)容對(duì)大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價(jià)值,謝謝大家對(duì)腳本之家的支持。如果你想了解更多相關(guān)內(nèi)容請查看下面相關(guān)鏈接
相關(guān)文章
java程序員自己的圖片轉(zhuǎn)文字OCR識(shí)圖工具分享
這篇文章主要介紹了java程序員自己的圖片轉(zhuǎn)文字OCR識(shí)圖工具,具有很好的參考價(jià)值,希望對(duì)大家有所幫助。如有錯(cuò)誤或未考慮完全的地方,望不吝賜教2022-11-11Java?多線程并發(fā)?ReentrantReadWriteLock詳情
這篇文章主要介紹了Java多線程并發(fā)ReentrantReadWriteLock詳情,ReentrantReadWriteLock可重入讀寫鎖。實(shí)際使用場景中,我們需要處理的操作本質(zhì)上是讀與寫,更多相關(guān)資料,感興趣的小伙伴可以參考一下下面文章內(nèi)容2022-06-06詳解Java如何實(shí)現(xiàn)在PDF中插入,替換或刪除圖像
圖文并茂的內(nèi)容往往讓人看起來更加舒服,如果只是文字內(nèi)容的累加,往往會(huì)使讀者產(chǎn)生視覺疲勞。搭配精美的文章配圖則會(huì)使文章內(nèi)容更加豐富。那我們要如何在PDF中插入、替換或刪除圖像呢?別擔(dān)心,今天為大家介紹一種高效便捷的方法2023-01-01Eureka源碼閱讀Client啟動(dòng)入口注冊續(xù)約及定時(shí)任務(wù)
這篇文章主要為大家介紹了Eureka源碼閱讀Client啟動(dòng)入口注冊續(xù)約及定時(shí)任務(wù)示例詳解,有需要的朋友可以借鑒參考下,希望能夠有所幫助,祝大家多多進(jìn)步,早日升職加薪2022-10-10新手小白入門必學(xué)JAVA面向?qū)ο笾鄳B(tài)
說到多態(tài),一定離不開其它兩大特性:封裝和繼承,下面這篇文章主要給大家介紹了關(guān)于新手小白入門必學(xué)JAVA面向?qū)ο笾鄳B(tài)的相關(guān)資料,文中通過實(shí)例代碼介紹的非常詳細(xì),需要的朋友可以參考下2022-02-02SpringBoot結(jié)合FreeMarker視圖渲染的實(shí)現(xiàn)
FreeMarker它允許開發(fā)人員使用模板和數(shù)據(jù)來生成輸出文本,如HTML網(wǎng)頁、電子郵件、配置文件和源代碼等,本文主要介紹了SpringBoot結(jié)合FreeMarker視圖渲染的實(shí)現(xiàn),感興趣的可以了解一下2024-03-03詳談jvm--Java中init和clinit的區(qū)別
下面小編就為大家?guī)硪黄斦刯vm--Java中init和clinit的區(qū)別。小編覺得挺不錯(cuò)的,現(xiàn)在就分享給大家,也給大家做個(gè)參考。一起跟隨小編過來看看吧2017-10-10如何在Spring中使用編碼方式動(dòng)態(tài)配置Bean詳解
這篇文章主要給大家介紹了關(guān)于如何在Spring中使用編碼方式動(dòng)態(tài)配置Bean的相關(guān)資料,文中通過示例代碼介紹的非常詳細(xì),對(duì)大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價(jià)值,需要的朋友們下面隨著小編來一起學(xué)習(xí)學(xué)習(xí)吧2018-05-05