vue的倒計時demo
阿新 • • 發佈:2018-12-04
vue的倒計時demo
me.btnVal--;
if (me.btnVal <= 0) {
me.sendMsgDisabled = false;
window.clearInterval(interval);
}
}, 1000);
console.log(me.btnVal)
},
效果:
1、
佈局:
<template>
<div class="col-xs-3" >
<button type="button" class="btn btn-default" v-if="sendMsgDisabled">{{this.btnVal}}</button>
<button type="button" class="btn btn-default" @click="gainCode" v-if="!sendMsgDisabled">驗證碼</button>
</div>
</template>
js:
export default {
data:{
btnVal:60,
sendMsgDisabled:false,
},
methods: {
gainCode:function(){
//點選獲取驗證碼倒計時;
let me = this;
me.sendMsgDisabled = true;
me.btnVal=60;
if (me.btnVal <= 0) {
me.sendMsgDisabled = false;
window.clearInterval(interval);
}
}, 1000);
console.log(me.btnVal)
},
}
}