uniapp如何添加多个表单数组？

目录

一、实现思路

二、实现步骤

        ①view部分展示

        ②JavaScript 内容

        ③css中样式展示

        

三、效果展示

四、小结 + 注意事项

        总结模板：

---

一、实现思路

        1.在 data 中定义一个数组，用于存储表单项的数据

        2.在模板中使用 v-for 指令渲染表单项

        3.在 methods 中定义添加和删除表单项的方法

        每点击一次 “添加表单项” 按钮，就会新增一个表单项

        并且你可以通过输入框的 v-model 来动态修改表单项的值。点击对应的 “删除” 按钮可以移除对应的表单项。

        

二、实现步骤

        ①view部分展示

			
				
			
			添加联系人
		

        ②JavaScript 内容

        ③css中样式展示

        

三、效果展示

        点击添加按钮就会添加一个输入框

        点击减少，就会减少输入框

       

        

四、小结 + 注意事项

        总结模板：

在模板中使用 v-for 指令渲染表单项                  删除         添加表单项

在 data 中定义一个数组，用于存储表单项的数据 data() {   return {     formItems: []   } }

在 methods 中定义添加和删除表单项的方法 methods: {   addFormItem() {     this.formItems.push({ value: '' });   },   removeFormItem(index) {     this.formItems.splice(index, 1);   } }

        这样就完成了在uni-app中添加多个表单数组的功能。每次点击“新增”按钮时，会自动添加一个新的表单项；而点击已存在的表单项右侧的“删除”按钮时，则会从列表中移除该表单项。

        表单中至少保留一条表单项，必须要有添加按钮，和移除按钮