VUE 註冊驗證碼頁面實例
阿新 • • 發佈:2018-11-06
turn mit name countdown asc input count css highlight
代碼如下 無css
<template> <div> <header> <router-link to="/inon"><i class="el-icon-back" ></i></router-link> <p>手機號碼驗證</p> </header> <main> <p>為了安全,我們會向手機發送驗證碼</p> <div> <input type="text" maxlength="1" tabindex="0" ref="a1" v-on:input="$refs.a2.focus()"> <input type="text" maxlength="1" ref="a2" v-on:input="$refs.a3.focus()"> <input type="text" maxlength="1" ref="a3" v-on:input="$refs.a4.focus()"> <input type="text" maxlength="1" ref="a4" v-on:input="submit()"> </div> </main> </div> </template>
export default { name:‘trans‘, data:function(){ return{ time:5, show:false, CountDown:true, } }, methods:{ submit(){ alert("註冊成功"); }, Time(){ let t =setInterval(()=>{ this.time--; if(this.time==0){ clearInterval(t); this.show=true; this.CountDown=false; this.tttime=5; } },1000) }, TTTime(){ this.time=5 this.show=false; this.CountDown=true; let t=setInterval(()=>{ this.time--; if(this.time==0){ clearInterval(t); this.show=true; this.CountDown=false; } },1000) } }, mounted() { this.$refs.a1.focus(); this.Time(); }, }
VUE 註冊驗證碼頁面實例