1. 程式人生 > >vue的倒計時demo

vue的倒計時demo

vue的倒計時demo

效果:


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;

        let interval = window.setInterval(function() {
    
me.btnVal--;
if (me.btnVal <= 0) {
me.sendMsgDisabled = false;
window.clearInterval(interval);
 }
}, 1000);
console.log(me.btnVal)

},

}

}