vue实现添加与删除图书功能

  • 更新时间:2022-12-01 08:51:07
  • 编辑:姜凯定

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

vue实现添加与删除图书功能

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

我们先来看看splice的用法。

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

注释:该方法会改变原始数组

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

vue实现添加与删除图书功能

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

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

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


vue实现添加与删除图书功能

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


vue实现添加与删除图书功能

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

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

总结

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

相关教程

  • vue数据劫持的原理

    这篇文章主要介绍了3分钟了解vue数据劫持的原理实现,文中通过示例代码介绍的非常详细,对大家的学习或者工作具有一定的参考学习价值,需要的朋友们下面随着小编来一起学习学习吧

    发布时间:2020-02-20

  • 用Cordova打包Vue项目的方法步骤

    这篇文章主要介绍了教你用Cordova打包Vue项目的方法,详细的介绍了如何Vue项目打包成app,具有一定的参考价值,有兴趣的可以了解一下

    发布时间:2020-02-18

  • vue中使用heatmapjs的实例详解

    这篇文章主要介绍了vue中使用heatmapjs的示例代码(结合百度地图),小编觉得挺不错的,现在分享给大家,也给大家做个参考。一起跟随小编过来看看吧

    发布时间:2020-07-16

  • vue组件高级用法实例详解

    给网友朋友们带来一篇关于vue的教程,这篇文章主要介绍了vue 组件高级用法,需要的朋友可以参考下

    发布时间:2022-06-22

  • 详解vue项目接入微信JSSDK的坑

    详解vue项目接入微信JSSDK的坑

    给大家整理了关于vue的教程,这篇文章主要介绍了详解vue项目接入微信JSSDK的坑,小编觉得挺不错的,现在分享给大家,也给大家做个参考。一起跟随小编过来看看吧

    发布时间:2022-06-17

  • vue和mintui-Loadmore结合实现下拉刷新上拉加载实例效果

    本篇文章主要介绍了vue mintui-Loadmore结合实现下拉刷新和上拉加载示例,具有一定的参考价值,感兴趣的小伙伴们可以参考一下

    发布时间:2020-02-11

  • vue2.0中proxyTable用axios进行跨域请求的设置方法

    这篇文章主要介绍了vue2.0设置proxyTable使用axios进行跨域请求,小编觉得挺不错的,现在分享给大家,也给大家做个参考。一起跟随小编过来看看吧

    发布时间:2020-01-02

  • vue使用vue-i18n实现国际化代码详解

    本篇文章主要介绍了vue使用vue-i18n实现国际化的实现代码,小编觉得挺不错的,现在分享给大家,也给大家做个参考。一起跟随小编过来看看吧

    发布时间:2020-01-31

  • Vue实现双向绑定的原理以及响应式数据的实例代码

    这篇文章主要介绍了Vue实现双向绑定的原理以及响应式数据的方法,小编觉得挺不错的,现在分享给大家,也给大家做个参考。一起跟随小编过来看看吧

    发布时间:2020-04-10

  • Vue.js中使用Mixins的方法详解

    本篇文章主要介绍了在Vue.js中使用Mixins的方法,Vue的Mixins是非常实用的编程方式,可以使代码变得容易理解,有兴趣的一起来了解一下

    发布时间:2020-06-03

用户留言