编程 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网页内滑动缓冲导航的实现代码

Apr 05 Javascript

JavaScript控制浏览器全屏及各种浏览器全屏模式的方法、属性和事件

Dec 20 Javascript

jQuery通过写入cookie实现更换网页背景的方法

Apr 15 Javascript

AngularJS国际化详解及示例代码

Aug 18 Javascript

JavaScript中localStorage对象存储方式实例分析

Jan 12 Javascript

JS实现简易换图时钟功能分析

Jan 04 Javascript

jquery在启动页面时,自动加载数据的实例

Jan 22 jQuery

详解如何从零开始搭建Express+Vue开发环境

Jul 17 Javascript

浅析vue-router jquery和params传参(接收参数)$router $route的区别

Aug 03 jQuery

vue2配置scss的方法步骤

Jun 06 Javascript

javascript中call,apply,callee,caller用法实例分析

Jul 24 Javascript

JS原型对象操作实例分析

Jun 06 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

You might like

PHP反转字符串函数strrev()函数的用法

2012/02/04 PHP

Laravel框架学习笔记（一）环境搭建

2014/10/15 PHP

PHP实现的文件上传类与用法详解

2017/07/05 PHP

File文件控件，选中文件(图片,flash,视频)即立即预览显示

2009/04/09 Javascript

Jquery实现无刷新DropDownList联动实现代码

2010/03/08 Javascript

ajax 同步请求和异步请求的差异分析

2011/07/04 Javascript

整理的比较全的event对像在ie与firefox浏览器中的区别

2013/11/25 Javascript

jQuery写fadeTo示例代码

2014/02/21 Javascript

用json方式实现在 js 中建立一个map

2014/05/02 Javascript

javascript实现根据iphone屏幕方向调用不同样式表的方法

2015/07/13 Javascript

如何用javascript计算文本框还能输入多少个字符

2015/07/29 Javascript

JavaScript 七大技巧(二)

2015/12/13 Javascript

精彩的Bootstrap案例分享重点在注释!(选项卡、栅格布局)

2016/07/01 Javascript

解析利用javascript如何判断一个数为素数

2016/12/08 Javascript

JS基于面向对象实现的多个倒计时器功能示例

2017/02/28 Javascript

xmlplus组件设计系列之列表（4）

2017/04/26 Javascript

关于bootstrap日期转化,bootstrap-editable的简单使用，bootstrap-fileinput的使用详解

2017/05/12 Javascript

vue如何获取点击事件源的方法

2017/08/10 Javascript

Vue2.0基于vue-cli+webpack同级组件之间的通信教程(推荐)

2017/09/14 Javascript

动态加载、移除js/css文件的示例代码

2018/03/20 Javascript

vue组件实现进度条效果

2018/06/06 Javascript

原生JS使用Canvas实现拖拽式绘图功能

2019/06/05 Javascript

微信小程序（订阅消息）功能

2019/10/25 Javascript

[33:09]完美世界DOTA2联赛循环赛 Forest vs DM BO2第二场 10.29

2020/10/29 DOTA

Python执行时间的计算方法小结

2017/03/17 Python

Django实现一对多表模型的跨表查询方法

2018/12/18 Python

Python中Flask-RESTful编写API接口(小白入门)

2019/12/11 Python

python实现时间序列自相关图(acf)、偏自相关图(pacf)教程

2020/06/03 Python

Vans荷兰官方网站：美国南加州的原创极限运动潮牌

2018/01/23 全球购物

世界上最大的皮肤科医生拥有和经营的美容网站：LovelySkin

2021/01/03 全球购物

文明村镇申报材料

2014/05/06 职场文书

优秀教研组申报材料

2014/12/26 职场文书

公司董事任命书

2015/09/21 职场文书

关于PostgreSQL JSONB的匹配和交集问题

2021/09/14 PostgreSQL

JavaScript 事件捕获冒泡与捕获详情

2021/11/11 Javascript

Python的代理类实现,控制访问和修改属性的权限你都了解吗

2022/03/21 Python