欧美成人午夜免费全部完,亚洲午夜福利精品久久,а√最新版在线天堂,另类亚洲综合区图片小说区,亚洲欧美日韩精品色xxx

扣丁學(xué)堂HTML5在線教程Vue驗(yàn)證碼60秒倒計(jì)時(shí)功能簡單實(shí)例代碼

2018-06-25 13:34:41 1536瀏覽

今天扣丁學(xué)堂HTML5在線教程給大家主要介紹關(guān)于Vue驗(yàn)證碼60秒倒計(jì)時(shí)功能簡單實(shí)例代碼,代碼簡單易懂，非常不錯(cuò)，具有一定的參考借鑒價(jià)值，需要的朋友可以參考下

template

　　<template>
　　<divclass='login'>
　　<divclass="loginHeader">
　　<inputtype="tel"class="loginBtnborder-bottom"placeholder="請輸入手機(jī)號"/>
　　<inputtype="tel"class="codeBtn"placeholder="請輸入驗(yàn)證碼"/>
　　<inputtype="button"class="getNumber"v-model="codeMsg"@click="getCode":disabled="codeDisabled"/>
　　</div>
　　</div>
　　</template>

script

　　<script>
　　exportdefault{
　　data(){
　　return{
　　//是否禁用按鈕
　　codeDisabled:false,
　　//倒計(jì)時(shí)秒數(shù)
　　countdown:60,
　　//按鈕上的文字
　　codeMsg:'獲取驗(yàn)證碼',
　　//定時(shí)器
　　timer:null
　　}
　　},
　　methods:{
　　//獲取驗(yàn)證碼
　　getCode(){
　　//驗(yàn)證碼60秒倒計(jì)時(shí)
　　if(!this.timer){
　　this.timer=setInterval(()=>{
　　if(this.countdown>0&&this.countdown<=60){
　　this.countdown--;
　　if(this.countdown!==0){
　　this.codeMsg="重新發(fā)送("+this.countdown+")";
　　}else{
　　clearInterval(this.timer);
　　this.codeMsg="獲取驗(yàn)證碼";
　　this.countdown=60;
　　this.timer=null;
　　this.codeDisabled=false;
　　}
　　}
　　},1000)
　　}
　　}
　　}
　　}
　　</script>

css（scss寫法）

　　<style>
　　.login{
　　width:100%;
　　height:100%;
　　background:#F9F9F9;
　　.loginHeader{
　　padding:010px;
　　background:#fff;
　　margin-top:20px;
　　overflow:hidden;
　　.loginBtn{
　　width:100%;
　　height:42px;
　　border:none;
　　background:#fff;
　　color:#444;
　　border-radius:4px;
　　outline:none;
　　padding-left:3px;
　　font-size:1.4rem;
　　box-sizing:border-box;
　　-webkit-appearance:none;
　　}
　　.border-bottom{
　　border-bottom:1pxsolid#F3F3F3;
　　}
　　.codeBtn{
　　width:63%;
　　height:42px;
　　border:none;
　　background:#fff;
　　color:#444;
　　border-radius:4px;
　　float:left;
　　outline:none;
　　padding-left:3px;
　　font-size:1.4rem;
　　box-sizing:border-box;
　　-webkit-appearance:none;
　　}
　　.getNumber{
　　width:35%;
　　height:36px;
　　float:right;
　　margin-top:3px;
　　border:1pxsolid#09BB07;
　　color:#09BB07;
　　background:#fff;
　　border-radius:4px;
　　outline:none;
　　-webkit-appearance:none;
　　}
　　}
　　}
　　</style>

總結(jié)

以上所述是小編給大家介紹的Vue驗(yàn)證碼60秒倒計(jì)時(shí)功能簡單實(shí)例代碼，希望對大家有所幫助，最后想要了解更多內(nèi)容的小伙伴可以登錄扣丁學(xué)堂官網(wǎng)咨詢?？鄱W(xué)堂是專業(yè)的HTML5培訓(xùn)機(jī)構(gòu)，不僅有專業(yè)的老師和與時(shí)俱進(jìn)的課程體系，還有大量的HTML5在線視頻供學(xué)員觀看學(xué)習(xí)，想要學(xué)好HTML5開發(fā)的小伙伴快快行動吧。扣丁學(xué)堂H5技術(shù)交流群：559883758。

【關(guān)注微信公眾號獲取更多學(xué)習(xí)資料】

查看更多關(guān)于“HTML5開發(fā)技術(shù)資訊”的相關(guān)文章>>