一般获取短信验证码的时候会用到这个demo:
button里面包两个span标签,根据点击状态,显示不同的span,关键代码就是倒计时:
rush:xhtml;">
disabled">{{time+'秒后获取'}}
disabled">send
rush:css;">
button {
width: 100px;
height: 50px background: pink;
}
rush:js;">
var vm = new Vue({
el: '#example',data() {
return {
time: 60,// 发送验证码倒计时
sendMsgdisabled: false
}
},methods: {
send() {
let me = this;
me.sendMsgdisabled = true;
let interval = window.setInterval(function() {
if ((me.time--) <= 0) {
me.time = 60;
me.sendMsgdisabled = false;
window.clearInterval(interval);
}
},1000);
}
}
})