这篇文章主要介绍了vue实现添加与删除图书功能,非常不错,具有一定的参考借鉴价值,需要的朋友可以参考下

先放大图,当我们点击删除的时候,图书名单就会被我们删掉。当我们重新添加回来或者添加新书的时候,我们只需要在添加新书这里添加即可。

当我点击删除的时候,只需要的就是除却删除的那一个书籍之后剩下的图书。

我们先来看看splice的用法。

splice() 方法向/从数组中添加/删除项目,然后返回被删除的项目。

注释:该方改变原始数组

故在删除书籍中我们会用到的方法是


删掉idx位置的那一种书,返回剩下的新的书籍数组。

当我们点击添加新书的时候,如果新书的id值比之前的书籍列表的值大,就添加在书籍末尾,否则就添加在对应的id处。

我们来看看添加书籍的代码



我们再来看看此demo的详细代码



本文升华自图书管理实战视频

此详细demo见我的github:https://github.com/JserJser/reactWebApp/tree/master/vue-cdn

总结

以上所述是小编给大家介绍的vue实现添加与删除图书功能,希望对大家有所帮助,如果大家有任何疑问欢迎给我留言,小编会及时回复大家的!

    无相关信息
最新资讯
优爱腾抢滩"竖屏微网剧":关键一役 既是回防更是进攻

优爱腾抢滩"竖屏微网

爱奇艺推出首部竖屏微网剧;腾讯也联合旗下Yoo视频上线
注意!你也用手机坐地铁公交?其中这笔钱猫腻太多…

注意!你也用手机坐地铁

很多消费者反映,在使用国产主流安卓手机办理多个城市交
三星拟在天津投建动力电池和MLCC项目 投资24亿美元

三星拟在天津投建动力

记者日前从天津方面及三星中国获悉,三星拟在天津调整部
美媒:每天有超过2亿人在YouTube观看游戏内容

美媒:每天有超过2亿人

每天有超过2亿人在YouTube观看游戏内容;而在过去一年里
我们这一代人的危与机:面对危机如何思考和行动

我们这一代人的危与机

危机真的会发生吗?为什么大家对此秉持不同判断?危机论容
杨振宁首度发声忆爱徒:张首晟是第一流的物理学家

杨振宁首度发声忆爱徒

“为美所驱追求科学,真是一种最高的境界,杨振宁先生带领
最新文章
详解mpvue小程序中怎么引入iconfont字体图标

详解mpvue小程序中怎

这篇文章主要介绍了详解mpvue小程序中怎么引入iconfon
JS如何获取地址栏的参数实例讲解

JS如何获取地址栏的参

本篇文章给大家带来了关于JS如何获取地址栏的参数实例
angularJs利用$scope处理升降序的方法

angularJs利用$scope

今天小编就为大家分享一篇angularJs利用$scope处理升
CKEditor4配置与开发详细中文说明文档

CKEditor4配置与开发

网上分享的CKEditor4中文说明很多都只是的部分使用方
angularjs获取到My97DatePicker选中的值方法

angularjs获取到My97D

今天小编就为大家分享一篇angularjs获取到My97DatePic
vue实现一个炫酷的日历组件

vue实现一个炫酷的日

公司业务新开了一个商家管理微信H5移动端项目,日历控件