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实现添加与删除图书功能,希望对大家有所帮助,如果大家有任何疑问欢迎给我留言,小编会及时回复大家的!

相关文章

  • Vue项目中引入ECharts的教程详解

    Vue项目中引入ECharts的教程详解

    ECharts是一个强大的画图插件,在vue项目中,我们常常可以引用Echarts来完成完成一些图表的绘制,本文就来和大家介绍一下如何在Vue项目中引入ECharts吧
    2023-03-03
  • vue实现长图垂直居上 vue实现短图垂直居中

    vue实现长图垂直居上 vue实现短图垂直居中

    这篇文章主要为大家详细介绍了vue弹性布局实现长图垂直居上,vue实现短图垂直居中,具有一定的参考价值,感兴趣的小伙伴们可以参考一下
    2017-10-10
  • vue使用mpegts.js实现播放flv的直播视频流

    vue使用mpegts.js实现播放flv的直播视频流

    这篇文章主要为大家详细介绍了vue如何使用mpegts.js实现播放flv的直播视频流,文中的示例代码讲解详细,有需要的小伙伴可以参考一下
    2024-01-01
  • vue+django实现下载文件的示例

    vue+django实现下载文件的示例

    这篇文章主要介绍了vue+django实现下载文件的示例,帮助大家更好的理解和学习使用vue框架,感兴趣的朋友可以了解下
    2021-03-03
  • Vue mock.js模拟数据实现首页导航与左侧菜单功能

    Vue mock.js模拟数据实现首页导航与左侧菜单功能

    这篇文章主要介绍了Vue mock.js模拟数据实现首页导航与左侧菜单功能,mockjs是用来模拟产生一些虚拟的数据,可以让前端在后端接口还没有开发出来时独立开发。我们可以使用真实的url,mockjs可以拦截ajax请求,返回设定好的数据
    2022-09-09
  • 详解vue2.0脚手架的webpack 配置文件分析

    详解vue2.0脚手架的webpack 配置文件分析

    本篇文章主要介绍了详解vue2.0脚手架的webpack 配置文件分析,具有一定的参考价值,感兴趣的小伙伴们可以参考一下
    2017-05-05
  • vuex通过getters访问数据为undefined问题及解决

    vuex通过getters访问数据为undefined问题及解决

    这篇文章主要介绍了vuex通过getters访问数据为undefined问题及解决方案,具有很好的参考价值,希望对大家有所帮助。如有错误或未考虑完全的地方,望不吝赐教
    2022-08-08
  • Vue-Cli配置代理转发解决跨域问题的方法

    Vue-Cli配置代理转发解决跨域问题的方法

    本文主要介绍了Vue-Cli配置代理转发解决跨域问题的方法,文中通过示例代码介绍的非常详细,对大家的学习或者工作具有一定的参考学习价值,需要的朋友们下面随着小编来一起学习学习吧
    2022-06-06
  • vue项目中运用webpack动态配置打包多种环境域名的方法

    vue项目中运用webpack动态配置打包多种环境域名的方法

    本人分享一个vue项目里,根据命令行输入不同的命令,打包出不同环境域名的方法。需要的朋友跟随小编一起看看吧
    2019-06-06
  • vue实现列表拖拽排序的示例代码

    vue实现列表拖拽排序的示例代码

    本文主要介绍了vue实现列表拖拽排序的示例代码,文中通过示例代码介绍的非常详细,对大家的学习或者工作具有一定的参考学习价值,需要的朋友们下面随着小编来一起学习学习吧
    2022-04-04

最新评论