vue.js 是目前最流行的前端框架之一，而 v-for 循环是 vue.js 中最常用的指令之一。在实际开发中，我们经常需要对 v-for 循环中的数据进行动态删除和新增，本文将向大家介绍如何在 vue.js 中实现这个功能。
什么是 v-for 循环
v-for 循环是vue.js中用于循环数组或者对象的指令。使用 v-for 可以将一组数据渲染到 html 模板中。语法如下：
---- --- ----------- -- --------- ---- ------- -----
上面代码中，v-for 指令会循环 items 数组中的每一个元素，并渲染成多个 li 元素。
动态删除 v-for 循环中的数据
在实际开发中，我们常常需要对 v-for 循环中的数据进行动态删除。这个过程需要用到 splice() 方法，示例如下：
---- ---------
----
--- ------------- ------ -- -------
-- ---- --
------- -------------------------------------
-----
-----
------
--------
--- --- - --- -----
--- -------
----- -
------ --------- --------- -------
--
-------- -
----------------- -
------------------------ ---
-
-
--
---------上面的代码中，我们通过给每一个 li 元素添加一个删除按钮，然后在方法 deleteItem() 中使用 splice() 方法删除数据。注意，splice() 方法第一个参数是要删除的数据的下标，第二个参数是要删除的数据的数量。
动态新增 v-for 循环中的数据
在实际开发中，我们也经常需要对 v-for 循环中的数据进行动态新增。这个过程需要使用 push() 方法，示例如下：
---- ---------
----
--- ------------- ------ -- -------
-- ---- --
-----
-----
------- -----------------------------
------
--------
--- --- - --- -----
--- -------
----- -
------ --------- --------- -------
--
-------- -
--------- -
--------------------------
-
-
--
---------上面代码中，我们添加了一个 Add 按钮，然后在方法 addItem() 中使用 push() 方法向 items 数组中添加数据。注意，push() 方法的参数是要添加的数据。
总结
本文向大家介绍了 vue.js 中 v-for 循环项的动态删除与新增操作示例。在实际开发中，动态删除和新增数据是非常常见的操作，掌握这个操作对于我们提高开发效率以及代码质量都有很大的帮助。希望本文对大家有所帮助，更多 vue.js 相关的知识敬请关注本站的后续文章。
来源：JavaScript中文网 ，转载请联系管理员！ 本文地址：https://www.javascriptcn.com/post/64d1ebbeb5eee0b52594415d