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)

},

}

}