Vue防止表单重复提交

最新推荐文章于 2023-08-21 15:44:00 发布

霸道流氓气质

最新推荐文章于 2023-08-21 15:44:00 发布

阅读量4.9k

点赞数

分类专栏：前端那些骚操作文章标签： Vue

本文链接：https://blog.csdn.net/BADAO_LIUMANG_QIZHI/article/details/82748964

版权

前端那些骚操作专栏收录该内容

470 篇文章 16 订阅

订阅专栏

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

这需要操作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>