V-model动态生成form表单，并自动绑定form表单数据

素颜马尾好姑娘i 2023-10-07 20:14 81阅读 0赞

根据传入的参数，动态生成表单，例如：传入参数3，表单需要加载3个输入框；传入参数6，需要加载6个输入框；代码如下：

<template>
    	<div>
    		<el-row :gutter="5">
    	             <el-form v-model="form">
    	                 <el-col :span="8" style="margin: 5px 0px;" v-for="i in formLength" :key="i">
    	                     <el-input type="text" v-model.number="form[`param${i}`] "><template slot="prepend">第{
       {i}}个</template></el-input>
    	                 </el-col>
    	                 <el-button type="danger" style="width:100%" @click="getData">获取表单值</el-button>
    	             </el-form>
    	    </el-row>
      </div>
    </template>
    <script>
    export default {
      data() {
        return {
          form:{},
          // 传入的参数
          formLength:6 
        }
      },
      methods:{
        getData(){
          console.log(this.form)
        }
      }
    }
    </script>

![4cb96e6166ba43818fececfd69a4b77e.png][]

![edf19fb9e574417dbc2d3d9776653de1.png][]

![b97106981178475eb9d890bdb4356c78.png][]

v-model="form\[\`username\`\]" 这种形式可以动态给form增加新的表单属性，反引号里面可以v-model="form\[\`param$\{i\}\`\]模板字符串形式。注意只能给form表单对象或者form对象里面的对象添加新属性，不是对象类型的属性无法添加

[4cb96e6166ba43818fececfd69a4b77e.png]: https://img-blog.csdnimg.cn/4cb96e6166ba43818fececfd69a4b77e.png
[edf19fb9e574417dbc2d3d9776653de1.png]: https://img-blog.csdnimg.cn/edf19fb9e574417dbc2d3d9776653de1.png
[b97106981178475eb9d890bdb4356c78.png]: https://img-blog.csdnimg.cn/b97106981178475eb9d890bdb4356c78.png

发表评论取消回复

表情：

评论列表（有 0 条评论，81人围观）

还没有评论，来说两句吧...

相关阅读

相关 Form表单

一、标签结构： <form>...</form> 二、普通文本框： <input type="text"> 三、密码输入框： <input type="passwor

太过爱你忘了你带给我的痛/ 2024年04月01日 15:17/ 0 赞/ 113 阅读

相关表单＜form＞

创建表单 `<form>` 标签用于创建供用户输入的 HTML 表单。 `<form>`标签的action属性的值指定了表单提交到服务器的地址。 `<form>`

亦凉/ 2024年03月29日 15:46/ 0 赞/ 114 阅读

相关 V-model动态生成form表单，并自动绑定form表单数据

根据传入的参数，动态生成表单，例如：传入参数3，表单需要加载3个输入框；传入参数6，需要加载6个输入框；代码如下： <template> <div>

素颜马尾好姑娘i/ 2023年10月07日 20:14/ 0 赞/ 82 阅读

相关 form表单自动填充

自动给表单填充数据案例：效果图： ![20210616131447143.png][] 代码示例： <!DOCTYPE html> <html>

淩亂°似流年/ 2023年10月04日 15:53/ 0 赞/ 31 阅读

相关 form表单

前后端交互流程： ![f8139f43d37f32797aad8c89c3ec5f28.png][] 表单在 Web 网页中用来给访问者填写信息，从而能采集客户端信息，使网

矫情吗；*/ 2023年09月30日 19:52/ 0 赞/ 35 阅读

相关 form表单

前后端交互流程： ![98a9393d26e8108f47fc83040ff442c9.png][] 表单在 Web 网页中用来给访问者填写信息，从而能采集客户端信息，使网

忘是亡心i/ 2023年09月27日 15:10/ 0 赞/ 163 阅读

相关 Bootstrap + AngularJS 双向数据绑定Form表单测试

近期项目需要实现更好的前后端分离，所以用到了AngularJS,AngularJS是一个开源的JavaScript框架，它具有四大核心特性：模块化和依赖注入，MVC分层，指令

一时失言乱红尘/ 2022年06月12日 15:00/ 0 赞/ 264 阅读

相关 SpringMVC——通过form表单绑定数据

今天写一个简单的项目用到form表单绑定数据，这里介绍一下方法。首先需要配置好相应的文件，这个步骤我这里就不再赘述，直接进入主题。我的controller代码如下：

谁践踏了优雅/ 2022年04月18日 02:08/ 0 赞/ 325 阅读

相关 Form-Form表单

一、典型表单在 Form 组件中，每一个表单域由一个 Form-Item 组件构成，表单域中可以放置各种类型的表单控件，包括 Input、Select、Check

灰太狼/ 2022年03月31日 15:11/ 1 赞/ 653 阅读

相关 form表单

Form表单 ajax基础 form表单的属性action与method 属性值描述 action URL 规定当提交表单时向何处发送表单数据 meth

浅浅的花香味﹌/ 2022年02月22日 20:06/ 0 赞/ 479 阅读