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

当我点击删除的时候，只需要的就是除却删除的那一个书籍之后剩下的图书。
我们先来看看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. Ceph常规操作及常见问题梳理

    Ceph集群管理 每次用命令启动.重启.停止Ceph守护进程(或整个集群)时,必须指定至少一个选项和一个命令,还可能要指定守护进程类型或具体例程. **命令格式如 {commandline} [opt ...

  2. 阿里云OSS下载pdf文件,并在pdf文件上添加水印

    代码: 兵马未动,粮草先行 作者: 传说中的汽水枪 如有错误,请留言指正,欢迎一起探讨. 转载请注明出处. 公司要求从阿里云OSS下载pdf文件并且需要添加水印. 因此这里总结一下. 首先添加了一个F ...

  3. ZJOI2008 生日聚会Party

    对于任意连续区间的限制,可以转化为以i结尾的所有区间的限制.这个转换在昨天的后缀自动机题也有用到,因此将其命名为区后变换.稍加分析后,我们记录以i结尾任意区间最大差即可进行DP转移.这个转换同时也创造 ...

  4. Notes of Daily Scrum Meeting（12.22）

    今天的团队任务总结如下: 团队成员 今日团队工作 陈少杰 进行网络连接的调试 王迪 优化搜索的算法 金鑫 准备前台的接口,查阅相关的资料 雷元勇 优化算法,对搜索进行测试 高孟烨 修改UI的接口,准备 ...

  5. Linux内核分析-创建新进程的过程

    分析Linux内核创建一个新进程的过程 task_struct结构体分析 struct task_struct{ volatile long state; //进程的状态 unsigned long ...

  6. mybatis中批量更新的问题

    问题:使用mybatis在执批量更新操作时,一直报错执行失败 解决方法: 首先打印了SQL语句,发现SQL语句拿出来执行没问题,也可以批量执行.SQL没问题,应该是配置的问题. 在网上查询和很多资料, ...

  7. OSG 改变窗口大小

    viewer.realize();//需要realize,否则窗口为null osgViewer::GraphicsWindow *pWnd = dynamic_cast<osgViewer:: ...

  8. mysql的group_concat对应oracle的wm_concat

    mysql的group_concat对应oracle的wm_concat http://bey2nd.blog.163.com/blog/static/12063183120124313360964/

  9. Java基础实践一：for关键字的实现原理

    Java源码: /** * Demo.java * com.yuanchuangyun.libra.web * * * ver date author * ────────────────────── ...

  10. Weblogic 9.2和10.3 改密码 一站完成

    Weblogic 9.2和10.3可通用,只需修改参照如下配置即可: SET BEA_HOME=F:\beaSET JRE_HOME=%BEA_HOME%\jdk150_04\binSET LIB_H ...