<div class="spandeng">
<span :class="{on:login}" @click="login=true">短信登录</span>
<span :class="{on:!login}" @click="login=false">密码登录</span>
</div>
<div>
<div v-if="login">
<input type="text" placeholder="请输入手机号" style="height: 45px;width: 330px" v-model="phone">
<button @click="getcode" :disabled="!rightphone" class="{right_phone:rightphone}" style="margin-left: -120px">
{{computedtime?`已经发送${computedtime}s`:'获取验证码'}}
</button><br>
<input type="text" placeholder="验证码" style="height: 45px;width: 330px">
</div>
<div v-if="!login">密码登录+++</div>
</div>
export default {
name: "dingdan",
data(){
return {
login:true,
phone:'',
computedtime:0
}
},
computed:{
rightphone(){
return /^1\d{10}$/.test(this.phone)
}
},
methods:{
getcode(){
if(!this.computedtime){
this.computedtime=60;
var Intervalid=setInterval(()=> {
this.computedtime--
if(this.computedtime<=0){
clearInterval(Intervalid)
}
},1000)
}
}
}
}