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

 更新时间:2018年10月07日 10:07:53   作者:jser_dimple  
这篇文章主要介绍了vue实现添加与删除图书功能,非常不错,具有一定的参考借鉴价值,需要的朋友可以参考下

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

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

我们先来看看splice的用法。

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

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

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


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

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

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



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



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

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

总结

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

相关文章

  • vue2单元测试环境搭建

    vue2单元测试环境搭建

    本篇文章给大家分享了vue2单元测试环境搭建的详细步骤,对此有需要的朋友参考学习下。
    2018-05-05
  • 解决Vue input输入框卡死的问题

    解决Vue input输入框卡死的问题

    这篇文章主要介绍了解决Vue input输入框卡死的问题,文中同时给大家提到了Vue-element中el-input输入卡顿问题及解决方法,本文结合示例代码给大家介绍的非常详细,需要的朋友可以参考下
    2022-09-09
  • vue3封装Notification组件的完整步骤记录

    vue3封装Notification组件的完整步骤记录

    在我们使用vue的开发过程中总会遇到这样的场景,封装自己的业务组件,下面这篇文章主要给大家介绍了关于vue3封装Notification组件的完整步骤,本文通过示例代码介绍的非常详细,需要的朋友可以参考下
    2022-03-03
  • Vue3中的极致防抖/节流详解(附常见方式防抖/节流)

    Vue3中的极致防抖/节流详解(附常见方式防抖/节流)

    在JavaScript中函数的防抖和节流不是什么新鲜话题,这篇文章主要给大家介绍了关于Vue3中极致防抖/节流的相关资料,文中通过实例代码介绍的非常详细,需要的朋友可以参考下
    2023-02-02
  • vue全局使用axios的方法实例详解

    vue全局使用axios的方法实例详解

    这篇文章主要介绍了vue全局使用axios的方法实例详解,非常不错,具有一定的参考借鉴价值,需要的朋友可以参考下
    2018-11-11
  • Vue计算属性中reduce方法实现遍历方式

    Vue计算属性中reduce方法实现遍历方式

    这篇文章主要介绍了Vue计算属性中reduce方法实现遍历方式,具有很好的参考价值,希望对大家有所帮助。如有错误或未考虑完全的地方,望不吝赐教
    2023-03-03
  • Vue Element UI + OSS实现上传文件功能

    Vue Element UI + OSS实现上传文件功能

    这篇文章主要为大家详细介绍了Vue Element UI + OSS实现上传文件功能,文中示例代码介绍的非常详细,具有一定的参考价值,感兴趣的小伙伴们可以参考一下
    2019-07-07
  • Vue3 全局实例上挂载属性方法案例讲解

    Vue3 全局实例上挂载属性方法案例讲解

    这篇文章主要介绍了Vue3 全局实例上挂载属性方法,本文通过示例代码给大家介绍的非常详细,对大家的学习或工作具有一定的参考借鉴价值,需要的朋友可以参考下
    2023-05-05
  • 详解如何在 vue 项目里正确地引用 jquery 和 jquery-ui的插件

    详解如何在 vue 项目里正确地引用 jquery 和 jquery-ui的插件

    本篇文章主要介绍了详解如何在 vue 项目里正确地引用 jquery 和 jquery-ui的插件,具有一定的参考价值,有兴趣的可以了解一下
    2017-06-06
  • Vue.use与Vue.prototype的区别及说明

    Vue.use与Vue.prototype的区别及说明

    这篇文章主要介绍了Vue.use与Vue.prototype的区别及说明,具有很好的参考价值,希望对大家有所帮助。如有错误或未考虑完全的地方,望不吝赐教
    2022-12-12

最新评论