vue 循环创建表单，绑定不同的v-model，实现动态表单绑定

氵我是大明星

于 2022-09-21 17:49:35 发布

阅读量3k

点赞数 2

CC 4.0 BY-SA版权

文章标签： vue.js javascript 前端

本文链接：https://blog.csdn.net/qq_30488445/article/details/126976388

本文介绍了一种根据传入参数动态生成表单输入框的方法。通过Vue.js实现了一个可以根据指定数量自动生成相应数量输入框的功能，并展示了具体的代码实现。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

最近遇到了一个需求，根据传入的参数，加载表单。例如：传入参数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>

显示效果如下：
在这里插入图片描述
测试结果如下：