有两种方法
<!DOCTYPE html><html><head><title>页面</title><meta http-equiv="Content-Type" content="textml; charset=UTF-8"><meta name="viewport"content="width=device-width, initial-scale=1.0, minimum-scale=1.0, maximum-scale=1.0, user-scalable=no"><script type="text/javascript" src="../js/jquery.min.js"></script><!--vue JS--><script src="../../static/js/vue.min.js"></script><!--VUE表单校验JS--><!--<script src="/vee-validate/2.0.0-rc.3/vee-validate.min.js"></script>--><script src="../../static/js/vee-validate.min.js"></script></head><body class="loading"><div class="wrapper"><div class="whole"><div class="zhuanz"><!--<form id="fm" @submit.prevent="validateBeforeSubmit" method="post">--><form id="fm" method="post"><strong style="text-align:center; "><!--第一种--><input type="button" @click="validateBeforeSubmit()" :disabled="isDisabled" value="确认提交"><!--第二种--><!--<input type="button" @click.once="validateBeforeSubmit()" value="确认提交">--></strong></form></div></div></div><script>$(document).ready(function () {Vue.use(VeeValidate, {locale: "zh_CN",//中文});var v= new Vue({el: '#fm',data: {isDisabled: false},methods: {validateBeforeSubmit() {// 禁用按钮this.isDisabled = true;// DOM 还没有更新/*this.$nextTick(function () {// DOM 现在更新了var _this = this;});*/alert(1);// 启用按钮// this.isDisabled = false;/*setTimeout(function () {alert(2);v.isDisabled = false;},3000);*/}}});});</script></body></html>
第一种效果，按钮直接禁用，不能点击。
注意:
如果启用按钮this.isDisabled = false;，可能会导致表单重复提交（反正我是遇到过），
应该setTimeout(function () {//alert(2);v.isDisabled = false;},3000);
给个延迟时间。
第二种效果，按钮只能点击一次，第二次点击没有反应
