在一些后台页面里,个人中心里的数据列表里,都会有对这些数据进行增删改查的操作。比如在管理员后台的用户列表里,我们可以录入新用户的信息,也可以对既有的用户信息进行修改。在vue中,我们更应该专注于对数据的操作和处理。(如图差不多就会出现这样的页面)

如图所示
我们在这个页面里,就实现了增删改查4个功能,我们把这些用户信息保存到students的数组中,然后增删改查就在这个数组上进行:

学生数组对象
1. 展示数据

数据显示
在html中使用v-for把数组渲染出来:

v-for 列表渲染
2. 增加和删除功能
添加用户时使用push方法,把用户的信息添加到student数组的后边:(如图)

最后要清空
删除相对来说简单一些,看图吧!

splice(索引,删除的数量,添加的元素) 操作数组本身,兼具删除,添加和替换功能。
3. 修改功能

修改

红叉事件
最后补充一下html代码如下图所示*

HTML代码显示