编程 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 使用手册(一)

Sep 23 Javascript

关于js拖拽上传 [一个拖拽上传修改头像的流程]

Jul 13 Javascript

DOM基础教程之使用DOM控制表格

Jan 20 Javascript

BootStrap智能表单实战系列(八)表单配置json详解

Jun 13 Javascript

JavaScript比较当前时间是否在指定时间段内的方法

Aug 02 Javascript

基于jQuery实现表格内容的筛选功能

Aug 21 Javascript

微信小程序之购物车功能

Sep 23 Javascript

微信小程序之滚动视图容器的实现方法

Sep 26 Javascript

layui的表单提交以及验证和修改弹框的实例

Sep 09 Javascript

微信小程序实现3D轮播图效果（非swiper组件）

Sep 21 Javascript

vue-autoui自匹配webapi的UI控件的实现

Mar 20 Javascript

springboot+vue实现文件上传下载

Nov 17 Vue.js

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