【vue】表单动态添加数据

最新推荐文章于 2024-08-08 09:40:00 发布

Dreammin

最新推荐文章于 2024-08-08 09:40:00 发布

阅读量4.8k

点赞数 1

分类专栏：学习笔记文章标签： vue

本文链接：https://blog.csdn.net/Dreammin/article/details/120533094

版权

本文介绍了在Vue中创建动态表单的方法，通过在return中定义数组存储数据，结合点击事件使用push和splice方法实现添加和删除操作。利用v-for循环和v-model进行数据绑定，展示了动态显示和管理表单数据的流程。

摘要由CSDN通过智能技术生成

如何做一个如图的表单动态添加数据？

动态添加数据

1、首先在return中定义一个数组，存放添加的数据

data() {
   
            return {
   
                stuList: [] //学生数组
            }
        },

2、点击新增按钮，则会在数组中添加一个学生对象，点击删除则会删除最后一行，所以需要写两个点击事件来控制。

 <el-button @click="addStu">新增一列</el-button>
 <el-button @click="subStu"

关注