list vue 添加数据方法_vue增删改查的简单操作

本文为大家分享了vue增删改查的简单操作，供大家参考，具体内容如下

我们把这些用户信息保存到list的数组中，然后增删改查就在这个数组上进行：

这里面的表单有：文本输入框，单选按钮，select选择框，复选框等。

1. 展示数据

我们的数据都放在数组list中，但是这里并不直接对list对循环输出，而是先把list中的数据给一个数组slist，对slist进行循环输出。因为我们在后面的查询功能中需要对数据进行过滤，数组list一直保存着原始数据(包括新增、修改后或已删除后)，而数组slist只负责展示。

在vue中提供一个setSlist方法，将需要展示的数据给了数组slist：

然后在html中使用v-for把slist数组渲染出来：

|

在操作这一栏中，给修改和删除操作绑定上事件。

2. 增加和删除功能

把增加功能和删除合并到一起，是这两个功能相对来说都比较简单。

增加用户时使用push方法，把用户的信息添加到list数组的最后：

这样就能添加一位ffff的用户了。

删除用户时，通过splice(index,1)，可以删除index位置的数据，页面上的数据自动就会更新。

3. 修改功能

假设我们弹层里的数据是selectedlist，那么每次修改时，把index位置的数据给了selectedlist，然后在弹层中修改selectedlist。我们也能看到修改数据的类型：