☆ 使用vue实现对数组的增删改查

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

如图所示

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

学生数组对象

1. 展示数据

数据显示

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

v-for 列表渲染

2. 增加和删除功能

     添加用户时使用push方法,把用户的信息添加到student数组的后边:(如图)

最后要清空

     删除相对来说简单一些,看图吧!

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

3. 修改功能

修改
红叉事件

     最后补充一下html代码如下图所示*

HTML代码显示

完!

©著作权归作者所有,转载或内容合作请联系作者
【社区内容提示】社区部分内容疑似由AI辅助生成,浏览时请结合常识与多方信息审慎甄别。
平台声明:文章内容(如有图片或视频亦包括在内)由作者上传并发布,文章内容仅代表作者本人观点,简书系信息发布平台,仅提供信息存储服务。

相关阅读更多精彩内容

友情链接更多精彩内容