本文详细介绍了如何在Vue中实现数据列表的增删改查功能。内容包括：1) 使用数组`list`存储原始数据，`slist`用于展示；2) 数据的增加和删除操作，通过`push`和`splice`方法实现；3) 修改功能，通过深拷贝避免双向绑定问题；4) 查询功能，动态过滤数据并展示；5) 弹层组件的创建，通过props传递数据并使用$emit通信。
在管理员的一些后台页面里，个人中心里的数据列表里，都会有对这些数据进行增删改查的操作。比如在管理员后台的用户列表里，我们可以录入新用户的信息，也可以对既有的用户信息进行修改。在vue中，我们更应该专注于对数据的操作和处理。
比如我们有一个这样的页面：
我们在这个页面里，就实现了增删改查4个功能，点击链接查看demo【】。
我们把这些用户信息保存到
list的数组中，然后增删改查就在这个数组上进行：
设置这些数据主要也是复习一下vue对表单的处理操作，这里面的表单有：文本输入框，单选按钮，select选择框，复选框等。
1. 展示数据
我们的数据都放在数组list中，但是这里并不直接对list对循环输出，而是先把list中的数据给一个数组slist，对
进行循环输出。因为我们在后面的查询功能中需要对数据进行过滤，数组list一直保存着原始数据(包括新增、修改后或已删除后)，而数组slist只负责展示。
在vue中提供一个setSlist方法，将需要展示的数据给了数组slist：
然后在html中使用v-for把slist数组渲染出来：
|
在操作这一栏中，给修改和删除操作绑定上事件。
2. 增加和删除功能
把增加功能和删除合并到一起，是这两个功能相对来说都比较简单。
增加用户时使用push方法，把用户的信息添加到list数组的最后：
这样就能添加一位fff
最低0.47元/天 解锁文章
1万+
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
