vue的form表单,vue的循环语句
本文主要介绍了Vue中圆形窗体项的例子，通过实例代码详细介绍，具有一定的参考价值。感兴趣的朋友可以参考一下。
有时候我们可能会遇到这种需求。用户可以通过单击按钮来添加相同的表单，并且只需单击一次。然后用deep copy，Vue.js ElementUI等等。效果大概如下，就是一个表单有一个下拉框和两个输入框。现在，点击“添加表单”按钮后，会出现另一个表单。单击“提交表单”后，将同时提交两个表单的值。
代码如下：
模板
差异
div style=margin: 10px 0
El-button type= primary @ click= addform 添加表单/el-button
El-button type= primary @ click= submit 提交表单/el-button
/div
div v-for=(item，index) in List :key=index
El-form ref= form label-width= 80px
El-form-item label=直播平台
El-选择
v-model=item.platform
:key=index
Placeholder=请选择一个直播平台
el选项
:label=item2.platformName
platformNameList中的v-for=(item2，index2)
:key=index2
:value=item2.platformValue
/el选项
/el-select
/El-表单-项目
El-form-item label= fans
el输入v-model= item . fanmount :key= index /El输入
/El-表单-项目
El-form-item标签=平台ID
el输入v-model= item . platform id :key= index /El输入
/El-表单-项目
/el格式
/div
/div
/模板
脚本
导出默认值{
data() {
返回{
标题：巡视内容页面，
personObj: {
平台： ，
粉丝数量： ，
平台Id: ，
},
平台名称列表：[
{
平台名称：“自动驾驶更快”，
平台值：“1”，
},
{
平台名称：“Tik Tok”，
平台值：“2”，
},
{
平台名称：淘宝，
平台值：“3”，
},
],
列表：[
{
平台： ，
粉丝数量： ，
平台Id: ，
},
],
};
},
方法：{
//深层复制
cloneObj(obj) {
让ret
if (Array.isArray(obj)) {
//创建一个空数组
ret=[]；
for(设I=0；长度；i ) {
ret[I]=this . cloneobj(obj[I])；
}
返回ret
} else if(Object . prototype . tostring . call(obj)==[Object Object]){
ret={ }；
for(让我在obj中)
ret[I]=this . cloneobj(obj[I])；
}
返回ret
}否则{
返回obj
}
},
//添加表单
addForm() {
设arr=this . cloneobj(this . person obj)；
console.log(arr ，arr)；
这个。list . push(arr)；
},
//提交表单
提交(){
console.log(this。列表，这个。列表)；
},
},
};
/脚本
代码分析：
这里封装了一个深度复制函数。每次你点击添加表单，你将复制一个我们定义的对象的副本。注意，这个对象是由我们初始形式的值组成的。我们使用v-for遍历最外层的数组列表，然后在每次单击“添加表单”时将一个对象推入数组。最后，点击“提交表单”按钮并打印。列表来查看整个数组对象。让我们尝试一下，并选择输入以下值：
控制台打印出来以查看效果：
现在如果有需求，指定添加几个表单，而不是一次点击添加表单，效果如下。有三个按钮，开头显示一个表单。
当我点击 3 按钮时，界面中有三个表格，如下所示：
代码如下：
模板
差异
div style=margin: 10px 0
El-button type= primary @ click= add(3)" 3/El-button
El-button type= primary @ click= addForm 添加表单/el-button
El-button type= primary @ click= submit 提交表单/el-button
/div
div v-for=(item，index) in List :key=index
El-form ref= form label-width= 80px
El-表单-项目标签=直播平台
埃尔-选择
v-model=item.platform
:key=index
占位符=请选择直播平台
埃尔选项
:label=item2.platformName
平台名称列表中的v-for=(项目2，索引2)
:key=index2
:value=item2.platformValue
/el选项
/el-select
/El-表单-项目
El-表单-项目标签=粉丝量
埃尔输入v-model=项。 fanmount :key= index /El输入
/El-表单-项目
El-表单-项目标签=平台ID
埃尔输入v-model=项。平台id :key= index /El输入
/El-表单-项目
/el格式
/div
/div
/模板
脚本
导出默认值{
data() {
返回{
标题： 巡查内容页，
personObj: {
平台： ,
粉丝数量： ,
平台Id: ，
},
平台名称列表：[
{
平台名称： 快手，
平台值："1",
},
{
平台名称： 抖音，
平台值："2",
},
{
平台名称： 淘宝，
平台值："3",
},
],
列表：[
{
平台： ,
粉丝数量： ,
平台Id: ，
},
],
};
},
方法：{
cloneObj(obj) {
让浸水使柔软
if (Array.isArray(obj)) {
//创建一个空数组
ret=[]；
对于(设I=0；长度；i ) {
ret[I]=这个。clone obj(obj[I])；
}
返回浸水使柔软
} else if(对象。原型。托斯特林。call(obj)==[Object Object]){
ret={ }；
对于(让我在目标文件中)
ret[I]=这个。clone obj(obj[I])；
}
返回浸水使柔软
}否则{
返回目标文件
}
},
添加(一){
这个。addform(a)；
},
addForm(a) {
设arr=这个。cloneobj(这个。person obj)；
console.log(arr ，arr)；
这个列表。push(arr)；
a-；
如果(a 0) {
这个。addform(a-1)；
}
},
提交(){
console.log(this.list ，this .列表);
},
},
};
/脚本
风格
/风格
代码分析如下：
点击按钮的增加方法的时候传入总共的表单个数，然后在添加表单的方法添加表单里用了自减和判断、递归来实现连续点击时的拷贝等。然后我们试一下效果
控制台打印看一下
到此这篇关于详解某视频剪辑软件里循环形式表单项实例的文章就介绍到这了，更多相关某视频剪辑软件循环形式表单项内容请搜索我们以前的文章或继续浏览下面的相关文章希望大家以后多多支持我们！
郑重声明：本文由网友发布，不代表盛行IT的观点，版权归原作者所有，仅为传播更多信息之目的，如有侵权请联系，我们将第一时间修改或删除，多谢。