Vue表单提交点击事件只允许点击一次的实例 Vue表单提交点击事件只允许点

【Vue表单提交点击事件只允许点击一次的实例】常用出现场景：商城点击订单提交
1、使用Vue封装事件
body：

方法：

methods: { submitOrder() { // 处理逻辑 }}

2、使用原生JS事件
在数据data里面声明一个flag属性

data() { return { isSubmit: true; }}

body:

方法：

methods: { submitOrder() { if (this.isSubmit) { this.isSubmit = false; // 处理逻辑 } }}

补充知识：表单验证提交内容不能为空的几种方法
方法一：
使用css的required属性

方法二：
使用JS代码示例，注意事项：form要加上onSubmit事件，form.xx.vlaue要在表单中对应name

用户注册
用户名：
密码：
重复密码：

方法三：
使用jQuery方法（通过class验证），需要引用jquery.min.js
优势：
1：为input添加class，名字可以随意设置，但每个input需要保持一致，本章案例calss设置为noNull。（若input已有class属性，可直接加到其后）
2：为input添加一个属性，用来后期通过jquery获取该字段，用作提示语。本章案例提示属性为notNull。
3：通过jQuery遍历页面中所有calss为noNull的表单，验证其是否为空，若为空，通过获取notNull的字段，进行为空提示。
具体如何设置，请参照下面的案例。