如何通过按钮实现添加行（v-for循环）和删除行

超、凢脫俗 2024-04-17 15:55 69阅读 0赞

如何通过按钮实现添加行（v-for循环）和删除行![在这里插入图片描述][20190828111421479.png]

为需要添加的部分设置循环v-for="(item,i) of 数组名"，  
然后设置数组初始为空字符就代表初始化显示一行，  
为按钮绑定添加和删除事件！添加行就是往数组中push一个空字符，数组中有几个字符就会循环产生几行，即数组长度为行的个数。  
删除事件需传入数组i为参数，删除行即删除数组元素，即截取splice（i，1）。

## 友情提示html界面布局要放在div中 ##

博主之前没有放在div中，结果数组有增加，行数一直只显示一行，原因是第二行覆盖第一行，后面新增的永远覆盖前面的，所以只出现第一行！

![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3dlaXhpbl80NDc3MDM3Nw_size_16_color_FFFFFF_t_70]![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3dlaXhpbl80NDc3MDM3Nw_size_16_color_FFFFFF_t_70 1]  
添加事件即往数组中push一个字符！通过改变数组长度来实现循环，数组长度就是循环产生的行数。  
删除事件即传入数组i值，然后splice删除i位置长度为1的数组字符！这样循环产生的行数就减少对应的行了！  
代码如下：

![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3dlaXhpbl80NDc3MDM3Nw_size_16_color_FFFFFF_t_70 2]  
效果如下：  
![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3dlaXhpbl80NDc3MDM3Nw_size_16_color_FFFFFF_t_70 3]

[20190828111421479.png]: https://image.dandelioncloud.cn/pgy_files/images/2024/04/17/4bc5458ade29442186a0aa4a8807f1b2.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3dlaXhpbl80NDc3MDM3Nw_size_16_color_FFFFFF_t_70]: https://img-blog.csdnimg.cn/20190828111814661.png?x-oss-process=image/watermark,type_ZmFuZ3poZW5naGVpdGk,shadow_10,text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3dlaXhpbl80NDc3MDM3Nw==,size_16,color_FFFFFF,t_70
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3dlaXhpbl80NDc3MDM3Nw_size_16_color_FFFFFF_t_70 1]: https://image.dandelioncloud.cn/pgy_files/images/2024/04/17/d59a46619c034283a4c3ca071ff45988.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3dlaXhpbl80NDc3MDM3Nw_size_16_color_FFFFFF_t_70 2]: https://image.dandelioncloud.cn/pgy_files/images/2024/04/17/f55bcbd69bb44a09b7e5ecd65db83dc1.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3dlaXhpbl80NDc3MDM3Nw_size_16_color_FFFFFF_t_70 3]: https://image.dandelioncloud.cn/pgy_files/images/2024/04/17/5835172cbf15445585efff3ac075894f.png