本文为大家分享了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。我们也能看到修改数据的类型: