详解Vue里循环form表单项实例
有的时候我们可能会遇到这种需求,用户点击某个按钮就可以增加一个同样的表单出来,点击一次增加一次。然后要用到深拷贝,Vue.js+ElementUI等等。效果大概如下,就是一个表单有下拉框和两个输入框,现在点击"添加表单"按钮之后就会多一个表单出来,点击"提交表单"后就同时提交两个表单的value值。
文章图片
代码如下:
添加表单 提交表单
代码分析:
这里封装了一个深拷贝函数,每次点击添加表单时就会拷贝一份我们定义好的对象,注意这个对象是由我们初始表单的value值组合起来的,我们在最外层用v-for遍历数组List然后每次点击"添加表单"就往数组里push一个对象,最后点击"提交表单"按钮,打印this.List就能看到整个的数组对象了,我们来试一下,选择输入以下值:
文章图片
控制台打印看下效果:
文章图片
现在假如说有个需求是,指定添加几项表单,而不是点一次加一次表单,效果如下,有三个按钮,最开始显示一个表单
文章图片
当我点击"3个"按钮的时候,界面总共有三个表单,如下图:
文章图片
代码如下:
3个 添加表单 提交表单
代码分析如下:
点击按钮的add方法的时候传入总共的表单个数,然后在添加表单的方法addForm里用了自减和判断、递归来实现连续点击时的拷贝等。然后我们试一下效果
文章图片
【详解Vue里循环form表单项实例】控制台打印看一下
文章图片
到此这篇关于详解Vue里循环form表单项实例的文章就介绍到这了,更多相关Vue循环form表单项内容请搜索脚本之家以前的文章或继续浏览下面的相关文章希望大家以后多多支持脚本之家!
推荐阅读
- 你到家了吗
- 闲杂“细雨”
- 村里的故事|村里的故事 --赵大头
- vue-cli|vue-cli 3.x vue.config.js 配置
- 2020-04-07vue中Axios的封装和API接口的管理
- 情节33.0
- 生命过客——第10章|生命过客——第10章 初为人母
- 你眼里的不公平,其实很公平
- Java|Java OpenCV图像处理之SIFT角点检测详解
- C语言浮点函数中的modf和fmod详解