编程 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 相关文章推荐

如何确保JavaScript的执行顺序之jQuery.html深度分析

Mar 03 Javascript

JavaScript的递归之递归与循环示例介绍

Aug 05 Javascript

JS 有趣的eval优化输入验证实例代码

Sep 22 Javascript

js data日期初始化的5种方法

Dec 29 Javascript

jquery实现省市select下拉框的替换(示例代码)

Feb 22 Javascript

jQuery设置与获取HTML,文本和值的简单实例

Feb 26 Javascript

深入理解Node中的buffer模块

Jun 03 Javascript

vue实现简单loading进度条

Jun 06 Javascript

Bootstrap Table 双击、单击行获取该行及全表内容

Aug 31 Javascript

Vue项目总结之webpack常规打包优化方案

Jun 06 Javascript

使用JavaScript通过前端发送电子邮件

May 22 Javascript

解决echarts中横坐标值显示不全(自动隐藏)问题

Jul 20 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