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

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

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

我们先来看看splice的用法。

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

注释:该方改变原始数组

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


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

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

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



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



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

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

总结

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

    无相关信息
最新资讯
戴姆勒CEO蔡澈:特斯拉和奔驰正洽谈新合作事宜

戴姆勒CEO蔡澈:特斯拉

戴姆勒(Daimler)CEO蔡澈(Dieter Zetsche)日前表示,特斯拉和
Twitter大跌10.66% 报30.52美元

Twitter大跌10.66% 报

截至北京时间22点40分(美国东部时间9点40分),Twitter大跌
Twitter盘前大跌8.23% 报31.35美元

Twitter盘前大跌8.23%

截至北京时间20点24分(美国东部时间7点24分),Twitter盘前
Twitter第四季度净利润2.44亿美元 同比增长72%

Twitter第四季度净利

第四季度,Twitter营收为9.09亿美元,同比增长24%。净利润
腾讯、MBK和Netmarble将联合竞购Nexon股权

腾讯、MBK和Netmarble

《韩国经济日报》援引匿名投行知情人士报道,腾讯、MBK
美航天局推迟商业载人飞船首次试飞时间

美航天局推迟商业载人

美国航天局6日公布了商业载人飞船试验性飞行的最新时
最新文章
微信小程序CSS3动画下拉菜单效果

微信小程序CSS3动画下

这篇文章主要为大家详细介绍了微信小程序CSS3动画下拉
微信小程序使用swiper组件实现层叠轮播图

微信小程序使用swiper

这篇文章主要为大家详细介绍了微信小程序使用swiper组
微信小程序实现带缩略图轮播效果

微信小程序实现带缩略

这篇文章主要为大家详细介绍了微信小程序实现带缩略图
小程序实现五星点评效果

小程序实现五星点评效

这篇文章主要为大家详细介绍了小程序实现五星点评效果
微信小程序实现笑脸评分功能

微信小程序实现笑脸评

这篇文章主要为大家详细介绍了微信小程序实现笑脸评分
微信小程序自定义轮播图

微信小程序自定义轮播

这篇文章主要为大家详细介绍了微信小程序自定义轮播图