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

当我点击删除的时候，只需要的就是除却删除的那一个书籍之后剩下的图书。
我们先来看看splice的用法。
splice() 方法向/从数组中添加/删除项目，然后返回被删除的项目。
注释：该方法会改变原始数组
故在删除书籍中我们会用到的方法是

删掉idx位置的那一种书，返回剩下的新的书籍数组。
当我们点击添加新书的时候，如果新书的id值比之前的书籍列表的值大，就添加在书籍末尾，否则就添加在对应的id处。
我们来看看添加书籍的代码

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

本文升华自图书管理实战视频
此详细demo见我的github:https://github.com/JserJser/reactWebApp/tree/master/vue-cdn

vue实现添加与删除图书的更多相关文章

  1. Vue实现添加、删除、关键字查询

    从今天开始,将不定期更新关于 Vue 的学习以及各种方法的使用,好了,下面就开始吧 Vue的实例创建首先需要我们引入一个vue.js(也可以在本地npm安装vue,我为了省事就...),然后在HTML ...

  2. vue中添加与删除，关键字搜索

    <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8&quo ...

  3. vue.js简单添加和删除

    这只是个简单的添加和删除,没有连接后台数据的 <%@ page language="java" contentType="text/html; charset=UT ...

  4. 打通前后端全栈开发node+vue进阶【课程学习系统项目实战详细讲解】(3)：用户添加/修改/删除 vue表格组件 vue分页组件

    第三章 建议学习时间8小时      总项目预计10章 学习方式:详细阅读,并手动实现相关代码(如果没有node和vue基础,请学习前面的vue和node基础博客[共10章] 演示地址:后台:demo ...

  5. Vue && Angular 双向绑定检测不到对象属性的添加和删除

    由于ES5的限制 Vue  && Angular 双向绑定检测不到对象属性的添加和删除  还有数组增加索引.这些改变不会触发change事件.Vue是因为实例化的时候已经把各个属性都s ...

  6. Vue学习之路第十六篇：车型列表的添加、删除与检索项目

    又到了大家最喜欢的项目练习阶段,学以致用,今天我们要用前几篇的学习内容实现列表的添加与删除. 学前准备: ①:JavaScript中的splice(index,i)方法:从已知数组的index下标开始 ...

  7. vue组件上动态添加和删除属性

    1.vue组件上动态添加和删除属性 // 添加 this.$set(this.obj, 'propName', val) // 删除 this.$delete(this.obj, 'propName' ...

  8. 后盾网lavarel视频项目---vue实现动态添加和删除板块

    后盾网lavarel视频项目---vue实现动态添加和删除板块 一.总结 一句话总结: 原理就是:列表时根据vue中的videos变量中的元素来遍历的,初始时videos:[{title:'',pat ...

  9. vue 实现todolist，包含添加，删除，统计，清空，隐藏功能

    vue 实现todolist,包含添加,删除,统计,清空,隐藏功能 添加:生成列表结构(v-for+数组).获取用户输入(v-model).通过回车新增数据(v-on+.enter) 删除:点击删除指 ...

随机推荐

  1. #个人博客作业week3——微软必应词典的使用

    产品的调研和评测 笔者使用的是win8的必应词典客户端. 首先打开客户端,用户界面的设计十分简洁,使用方便.但是词典主页与大多外语软件的设计相仿,例如有每日一句,每日阅读等模块,并没有令人感到新奇的地 ...

  2. C# wkhtmltopdf 将html转pdf（详解）

    https://www.cnblogs.com/louby/p/905198.html转自,看文章只放了代码看起来云里雾里的,在此做些解析 使用说明: 1.首先呢,得安装下软件,地址下面有链接,文件里 ...

  3. Distances to Zero CodeForces - 803B （二分）

    题目链接:https://vjudge.net/problem/CodeForces-803B#author=0 题意: 给你一个数组,其中至少包括一个0,求每一个元素距离最近一个0的距离是多少. 样 ...

  4. 链表数据结构(C/C++语言实现）

    注意:没有使用malloc和free:加了一个头文件,用于清屏和暂停:还有就是一个错误特别容易被忽略,那就是主函数中声明了LinkList p,然后就直接创建链表,忘了给p分配空间.一定要先初始化链表 ...

  5. Consul vs. Zookeeper

    https://www.consul.io/intro/vs/zookeeper.html 阿里不用zookeeper而是用consul,京东也在用consul.

  6. Eclipse:An internal error occurred during: "Building workspace". GC overhead limit exceeded

    http://blog.csdn.net/shaozhang872196/article/details/18552273 http://www.cnblogs.com/sonofelice/p/52 ...

  7. JavaScript解决一个带验证的Form两个Submit事件（一个页面保持不动【AJAX实现】，一个页面提交并跳转）的场景

    <form class="form-horizontal" action="/biz/patent/edit" method="post&quo ...

  8. jquery的extend方法（源码解析）

    1.前段时间一直忙于研究数据可视化(d3.js,three.js) 以及 php的 laravel框架,生活上也遇到很多事情,这大概就是人生中的迷茫期吧. 回想起,刚出来工作的时候,目标很明确,要学习 ...

  9. laravel 数据库获取值的常用方法

    ---恢复内容开始--- find($id) 需要一个主键$id并返回一个模型对象,若不存在则返回null findOrFail($id) 需要一个主键$id并返回一个模型对象,若不存在则发生错误,抛 ...

  10. [转帖]UML各种图总结-精华

    UML各种图总结-精华 https://www.cnblogs.com/jiangds/p/6596595.html 之前自己以为画图很简单 不需要用心学 现在发现自己一直没有学会一些基础的知识 能力 ...