很多时候开发程序时由于不注意，发现按钮可以连续多次的点击，造成了某些影响，其实在vue中禁止按钮多次点击的方法很简单，也有很多种，以下便是简单的一种，给大家说明下以下实例的意思。
实...
很多时候开发程序时由于不注意，发现按钮可以连续多次的点击，造成了某些影响，其实在vue中禁止按钮多次点击的方法很简单，也有很多种，以下便是简单的一种，给大家说明下以下实例的意思。
实例解析
我们首先给data内声明一个字段为zhuangtai，默认为true, 在点击事件最顶部做了一个if判断，this.zhuangtai为true是便不走if内的代码，直接向下走，然后改变this.zhuangtai的值为false,最后走到了console.log,输出后再次点击按钮就失效了，因为this.zhuangtai现在等于false，走到if括号内被return出去了，代码不会继续向下执行了，也就等于点击按钮无效，但我的事件里创建了一个倒计时执行代码，3秒后将this.zhuangtai的值改为true,这是按钮又可以点击了，实际开发中你或许是执行完某些事件才能再次点击，无论如何，你只要this.zhuangtai的值即可切换是否可点击状态。
实例代码
<html>
<head>
<meta charset="UTF-8">
<title>data2</title>
<script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
</head>
<body>
<div id="app">
<button @click="button()">按钮</button>
</div>
<script>
let that;
var app = new Vue({
el: '#app',
data: {
zhuangtai: true
},
created: function() {
// 把this的指向赋给that，因为setTimeout内已经改变了this的指向
that = this;
},
methods: {
button() {
if(!this.zhuangtai) {
return
}
this.zhuangtai = false;
console.log('点击了按钮')
//3秒后把zhuangtai改为true,三面后又可以点击了
setTimeout(function() {
that.zhuangtai = true;
}, 3000)
}
}
})
</script>
</body>
</html>
