编程 Javascript

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

Posted in Javascript onOctober 07, 2018

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

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

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

我们先来看看splice的用法。

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

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

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

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

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

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

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

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

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

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

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

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

总结

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

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

- Author -

jser_dimple

声明：登载此文出于传递更多信息之目的，并不意味着赞同其观点或证实其描述。

Javascript 相关文章推荐

jQuery 使用手册(五)

Sep 23 Javascript

JS 使用for循环遍历子节点查找元素

Sep 06 Javascript

微信小程序开发指南详解

Sep 27 Javascript

WEB 前端开发中防治重复提交的实现方法

Oct 26 Javascript

使用veloticy-ui生成文字动画效果

Feb 08 Javascript

超详细动手搭建一个VuePress 站点及开启PWA与自动部署的方法

Jan 27 Javascript

vue控制多行文字展开收起的实现示例

Oct 11 Javascript

JavaScript 替换所有匹配内容及正则替换方法

Feb 12 Javascript

Element Badge标记的使用方法

Jul 27 Javascript

vue+swiper实现左右滑动的测试题功能

Oct 30 Javascript

vuex中遇到的坑,vuex数据改变,组件中页面不渲染操作

Nov 16 Javascript

js实现简单商品筛选功能

Feb 02 Javascript

JavaScript检查数据中是否存在相同的元素（两种方法）

Oct 07 #Javascript

JS函数内部属性之arguments和this实例解析

Oct 07 #Javascript

JS如何获取地址栏的参数实例讲解

Oct 06 #Javascript

详谈js的变量提升以及使用方法

Oct 06 #Javascript

浅析js中mvvm模式实现的原理

Oct 06 #Javascript

js for终止循环跳出多层循环

Oct 04 #Javascript

iView-admin 动态路由问题的解决方法

Oct 03 #Javascript

GTX1660(1) i5 10400(1) R72E(1) i7 6700(1) win11(40) R71E(1) React(6) 对讲机(1) i5 9400(1) win10(43)