Vue防止表单重复提交

版权声明:本文为博主原创文章,遵循 CC 4.0 by-sa 版权协议,转载请附上原文出处链接和本声明。
本文链接:https://blog.csdn.net/BADAO_LIUMANG_QIZHI/article/details/82748964

在提交表单时按钮点击一次后,为防止重复表达提交,需要将提交按钮置灰。

这需要操作button的disabled属性。

<!doctype html>
<html lang="en">
 <head>
  <meta charset="UTF-8">
  <meta name="Generator" content="EditPlus®">
  <meta name="Author" content="">
  <meta name="Keywords" content="">
  <meta name="Description" content="">
  <title>Vue防止表单重复提交</title>
 </head>
 <body>
 	<div id="app">
		<button @click="function1()" :disabled="isDisabled">提交</button>
	</div>
<!-- 开发环境版本,包含了有帮助的命令行警告 -->
<script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>  
<script>
	new Vue({
		el:'#app',
		data:{
			isDisabled:false
		},
		methods:{
			function1(){
				this.isDisabled = true
			}
		}
	})
</script>
 </body>
</html>

展开阅读全文

没有更多推荐了,返回首页