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

当我点击删除的时候，只需要的就是除却删除的那一个书籍之后剩下的图书。
我们先来看看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. LVS负载均衡-基础知识梳理

    一. 集群的概念 服务器集群简称集群是一种服务器系统,它通过一组松散集成的服务器软件和/或硬件连接起来高度紧密地协作完成计算工作.在某种意义上,他们可以被看作是一台服务器.集群系统中的单个服务器通常称 ...

  2. LVS+Keepalived 高可用环境部署记录（主主和主从模式）

    之前的文章介绍了LVS负载均衡-基础知识梳理, 下面记录下LVS+Keepalived高可用环境部署梳理(主主和主从模式)的操作流程: 一.LVS+Keepalived主从热备的高可用环境部署 1)环 ...

  3. Individual P1: Summary

    经过5个小时成功把simple mode写差不多了..orz 也是蛮拼的. 开始毫无头绪,本能地开始从度娘搜索‘c# 单词统计’= =看了两段代码也算是见过c#的人了.差不多花了我1小时的时间. 然后 ...

  4. 印象之初：BugPhobia’s Brief Introduction

    0x01 :序言 I leave uncultivated today, was precisely yestoday perishes tomorrow which the person of th ...

  5. [Beta]M2事后分析

    计划 你原计划的工作是否最后都做完了? 如果有没做完的,为什么? 答:没有,全部的功能没有实现.其中,界面还差两个,逻辑还差闹钟逻辑和群组逻辑,可以说这些东西是我们的核心功能之一,缺失了他们对我们整个 ...

  6. Linux内核设计与实现 第四章

    1. 什么是调度 现在的操作系统都是多任务的,为了能让更多的任务能同时在系统上更好的运行,需要一个管理程序来管理计算机上同时运行的各个任务(也就是进程). 这个管理程序就是调度程序,功能: 决定哪些进 ...

  7. iOS开发线程安全问题

    先来看一下代码: - (void)viewDidLoad { [super viewDidLoad]; self.testStr = @"String initial complete&qu ...

  8. ABP框架用Dapper实现通过SQL访问数据库

    ABP的框架(2) - 访问数据库   为了防止不提供原网址的转载,特在这里加上原文链接:http://www.cnblogs.com/skabyy/p/7517397.html 本篇我们实现数据库的 ...

  9. MySql连接空闲8小时自动断开引起的问题

    一.问题描述 ​ 最近遇到了一个奇怪的MySql数据库问题,好几次前一天晚上历史数据还正常存储,第二天早上来了看实时数据存储还正常,历史数据不存储了.找了好久也没找到问题.后来仔细想了想,历史数据设置 ...

  10. canvas高斯模糊算法

    对于模糊图片这个效果的实现,其实css3中的filter属性也能够实现,但是这个属性的兼容性不是很好,所以我们通常不用这种方法实现,而使用canvas配合JS实现. <span style=&q ...