Vue里循环form表单项实例

已于 2023-08-17 10:33:47 修改
阅读量4.4k 收藏 22
点赞数 2
分类专栏： vue2实战记录 文章标签： vue.js javascript html5
于 2021-09-07 22:58:46 首次发布
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/qq_37635012/article/details/120168948
版权

有的时候我们可能会遇到这种需求，用户点击某个按钮就可以增加一个同样的表单出来，点击一次增加一次。然后要用到深拷贝，Vue.js+ElementUI等等。效果大概如下，就是一个表单有下拉框和两个输入框，现在点击"添加表单"按钮之后就会多一个表单出来，点击"提交表单"后就同时提交两个表单的value值。
在这里插入图片描述
代码如下:

<template>
  <div>
    <div style="margin: 10px 0">
      <el-button type
了解本专栏 订阅专栏 解锁全文 超级会员免费看
百思不得小李
关注
  • 2
    点赞
  • 踩
  • 22
    收藏
    觉得还不错? 一键收藏
  • 5
    评论
专栏目录
订阅专栏
vue + element-ui 循环生成指定form表单
qq_43227422的博客
03-01 2182
在平常开发中，form表单是写的最多且最繁琐的一个功能。为了避免代码冗余，我把form表单抽出来当做一个组件并且根据数据来动态生成基本表单~
form表单循环，新增,删除
凡尘
05-08 453
form表单循环，新增,删除
推荐使用：Vueform - Vue.js 的强大表单构建框架
最新发布
gitblog_00021的博客
05-20 393
推荐使用：Vueform - Vue.js 的强大表单构建框架 项目地址:https://gitcode.com/vueform/vueform Vueform 是一个专为 Vue.js 设计的开源表单构建框架，旨在简化并标准化从表单渲染到验证和处理的整个流程。它的出现使得开发者可以更高效地创建出功能丰富且易于管理的表单。 项目介绍 Vueform 提供了超过 25 种表单元素，包括多文件上传、日...
Vue项目中，如何为遍历生成的form表单设置ref属性
qq_52569656的博客
08-17 2561
本文案例基于Vue3+Ts+ElementPlus技术栈，介绍如何通过一次点击事件来触发通过循环生成的多个表单校验
uniapp中UView中 u-form表单在v-for循环下如何进行表单校验
weixin_41463944的博客
09-01 4983
uniapp中UView中 u-form表单在v-for循环下如何进行表单校验
vue3.2 table遍历form表单数据校验
Cupid
08-11 913
vue3.2 table遍历form表单数据校验。
使用Vue动态生成form表单的实例代码
08-27
使用Vue动态生成form表单的实例代码 以下是关于使用Vue动态生成form表单的实例代码的知识点总结： 1. 使用Vue动态生成form表单的实例代码可以使用FormCreate插件来实现。FormCreate是一个基于Vue的动态form表单...
vue-form表单验证是否为空值的实例详解
10-16
总结一下，这个 Vue-form 表单验证实例展示了如何利用 Vue 的响应式系统和事件处理来实现表单验证。通过绑定数据、监听表单事件以及编写验证逻辑，我们可以创建出一个能够有效处理用户输入并提供反馈的交互式表单。...
Vue循环组件加validate多表单验证的实例
12-29
*父父组件（helloWorld.vue）: <el type=text click=saveAll class=button>SAVE <promise ref=promiseFather></promise> [removed] import PromiseFather from './promiseFather' export default { name: ...
vue 解决form表单提交但不跳转页面的问题
10-16
接下来，我们需要在Vue实例的`methods`选项中定义`sub`方法，这个方法负责处理表单数据的发送和接收。通常我们会使用Ajax库，如jQuery的`$.ajax`或`$.post`，将表单数据发送到服务器： ```javascript export ...
vue+element-ui Form表单验证循环
qq_41820599的博客
01-12 1969
之前一直在写小程序，vue全都忘没了。害。。。。 步入正题，今日问题： vue+element-ui Form表单循环+表单验证 我想着简化一下代码，因为全部都是input表单。 要的效果图就是这样的。所以最开始就应该给el-form-item加一个v-for循环。但是问题出现了input的v-model如果写进ruleForm中，则就无法动态赋值 官方的验证信息是这样的。所以如果我input的v-model给一个ruleForm下的属性显然是行不通的。所以我只能将input的v-model写进循环的数组
ant design vue动态循环生成表单以及自定义校验规则
热门推荐
qq_43958325的博客
08-06 1万+
在ant design vue开发中有时候会利用后台数据循环生成表单，需要我们绑定prop以及自定义校验事件 以下是我用官网提供的方法结合自身项目写出来的总结 一、首先在data里定义表单数据 // 循环生成的人员表单数据 addManForm:{ manObjList:[ { person_info_company_guid:undefined,//所属公司 person_info_team_guid:undefined,..
vue+element，form循环嵌套表单 、动态添加表单、嵌套表单自定义校验规则
minmin_web的博客
12-28 4933
动态嵌套校验的难点主要是如何绑定prop属性，自定义方法的难点主要是如何在嵌套的基础上设置自定义方法以及如何将v-for的索引传入校验
antd + VUE循环form-item的校验（单层循环、多层循环）
学敲代码的Stars的博客
05-05 2345
【代码】antd + VUE循环form-item的校验。
如何实现Vue和Element多个输入框校验及循环终止（脱离表单的），element样式穿透
qq_43476358的博客
06-01 445
当脱离UI的校验单独添加时,一般原生的js校验往往是最优选择,但项目如果允许的话,也可以选择UI的延展校验,例如element的(这个是英文的,喜欢的可以参考)
给循环el-form表单添加校验规则（el-form-item内部有多个el-input框）
qq_43434290的博客
05-27 2390
el-form-item内部有多个el-input添加表单规则校验方式
uniapp基于uview的动态表单处理方式以及验证方法（验证涉及map循环需要等待执行）
add-oil的博客
08-08 4788
uniapp基于uview的动态表单处理方式以及验证方法（验证涉及map循环需要等待执行==》使用promise.all方法进行处理）
vue开发for循环判断表单列表空值技巧
boy火巨的博客
06-22 7524
上传表单时经常判空，一个一个判断麻烦！这里提示个技巧：首先要有表单的集合，和提示内容的集合，表单输入内容时通过vue的v-model更改表单内容集合，通过循环param表单内容，对应的提示paramTips内容this.Tips为自己写的提示方法 <script> export default { name: "feedShopping", data() { r...
vue+element多级v-for循环表单验证
weixin_44840212的博客
05-07 6689
如下图所示：v-for循环生成的不定个数不定层级的表单验证，可以手动新增或删除，现以两层循环为例 验证方法如下：先看结构 首先：要为每个form-item添加rules 其次：item要绑定动态的prop,如上，循环的titleParams拼接对应的下标io再拼接对应绑定的字段名称 此处注意：多级循环中，下级循环item绑定的prop要从第一级循环开始拼接，如上图中的二级循环，‘titlePa...
vue低代码form表单
08-02
### 回答1： Vue.js 是一个用于构建用户界面的框架。Vue 提供了一些实用的特性来帮助你创建表单。 其中之一是表单控件绑定。你可以使用 `v-model` 指令将表单控件与 Vue 实例的数据进行双向绑定。这样，当表单控件的值发生改变时，Vue 实例的数据也会跟着更新，反之亦然。 例如，你可以使用如下代码创建一个带有单行文本输入框的表单： ``` <template> <form> <label for="name">Name:</label> <input type="text" v-model="name" id="name" /> </form> </template> <script> export default { data() { return { name: '' } } } </script> ``` 这样，当用户在文本输入框中输入内容时，`name` 变量的值也会跟着更新。 Vue 还提供了一些验证相关的特性，可以帮助你对表单输入的数据进行验证。例如，你可以使用 `v-validate` 指令来验证表单数据的有效性，使用 `v-if` 指令来显示验证错误信息等。 总的来说，使用 Vue 创建表单是非常方便的，它提供了很多实用的特性来帮助你实现表单的各种功能。 ### 回答2： Vue低代码form表单是一种基于Vue框架的表单设计方式，旨在降低开发者编写和维护表单的工作量。它通过封装常用的表单组件和提供简洁的API，使开发者能够快速地创建各种表单，并自动处理表单的验证和数据的收集。 使用Vue低代码form表单，开发者只需要通过简单的配置就能够创建表单。首先，我们需要定义表单的字段和验证规则。可以通过使用预定义的组件（如输入框、下拉框等）来定义字段，然后通过指定规则来验证字段的值。验证规则可以是必填、最大长度、邮箱格式等等。 接下来，我们需要将表单配置信息传递给Vue低代码form表单组件。这样，该组件会根据配置信息自动生成表单界面，并且自动为表单字段加上验证功能。同时，表单组件还会提供一系列API，可以根据需要获取表单数据、验证表单、提交表单等操作。 使用Vue低代码form表单的好处是显而易见的。首先，它能够大大减少开发者编写表单的代码量，提高开发效率。其次，表单组件集成了常用的表单验证功能，减少了验证逻辑的开发难度。最后，表单组件还提供了一些额外的功能，如动态表单、条件显示等，使开发者可以更加灵活地定制表单界面。 总而言之，Vue低代码form表单是一种简化表单开发的工具，通过提供简洁的API和功能丰富的表单组件，帮助开发者快速创建、验证和提交表单，从而提高开发效率。 ### 回答3： Vue低代码form表单是一种在Vue框架下使用少量代码来创建表单的方式。通过使用Vue的数据驱动特性，我们可以轻松地定义和管理表单的状态、验证规则和提交行为。 首先，我们可以使用Vue的响应式数据绑定功能来定义表单的数据模型。这样，我们就可以轻松地获取、设置和监听表单中的各个字段的值。例如，我们可以定义一个data对象，包含表单的各个字段，如用户名、密码、邮箱等。然后，在表单输入框中使用v-model指令将输入的值与这些字段进行绑定。 其次，我们可以使用Vue提供的表单验证插件或自定义的验证规则来进行表单验证。可以使用v-bind指令将验证规则与表单字段绑定，在用户输入或提交表单时触发验证逻辑。通过配置验证规则、错误提示信息以及触发时机，我们可以实现自定义的表单验证逻辑。例如，可以验证用户名是否为空或长度是否符合要求，邮箱是否符合格式等。 最后，在用户提交表单时，我们可以使用Vue提供的事件监听机制来处理提交逻辑。可以使用v-on指令监听表单的submit事件，并在对应的方法中编写提交表单的代码。在该方法中，我们可以获取表单字段的值，并进行进一步的处理，如发送请求、重置表单等。 总之，通过Vue的数据驱动、响应式和事件监听功能，我们可以低代码地创建和管理表单，实现表单数据的绑定、验证和提交逻辑。这样，我们可以更加高效地开发表单功能，提升开发效率。同时，由于使用了Vue框架，我们还可以享受到其它优秀特性，如组件化、数据流管理等，使表单开发更加强大和灵活。

“相关推荐”对你有帮助么？

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论 5
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值