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实现添加与删除图书功能,希望对大家有所帮助,如果大家有任何疑问欢迎给我留言,小编会及时回复大家的!

Javascript 相关文章推荐
jQuery提交表单ajax查询实例代码
Oct 07 Javascript
js实现类似MSN提示的页面效果代码分享
Aug 24 Javascript
js实现input密码框提示信息的方法(附html5实现方法)
Jan 14 Javascript
在AngularJS框架中处理数据建模的方式解析
Mar 05 Javascript
jQuery qrcode生成二维码的方法
Apr 03 Javascript
js实现数字递增特效【仿支付宝我的财富】
May 05 Javascript
Angular4 中常用的指令入门总结
Jun 12 Javascript
基于JS实现网页中的选项卡(两种方法)
Jun 16 Javascript
ZeroClipboard.js使用一个flash复制多个文本框
Jun 19 Javascript
javascript实现手动点赞效果
Apr 09 Javascript
Vue前端项目部署IIS的实现
Jan 06 Javascript
vue mvvm数据响应实现
Nov 11 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
You might like
php网站来路获取代码(针对搜索引擎)
2010/06/08 PHP
PHP管理内存函数 memory_get_usage()使用介绍
2012/09/23 PHP
PHP简单计算两个时间差的方法示例
2017/06/20 PHP
php常用的工具开发整理
2019/09/26 PHP
JavaScript与C# Windows应用程序交互方法
2007/06/29 Javascript
JS中==与===操作符的比较
2009/03/21 Javascript
基于jquery的使ListNav兼容中文首字拼音排序的实现代码
2011/07/10 Javascript
解析js原生方法创建表格效率测试
2013/07/08 Javascript
使用js实现一个可编辑的select下拉列表
2014/02/20 Javascript
JavaScript利用构造函数和原型的方式模拟C#类的功能
2014/03/06 Javascript
javascript密码强度校验代码(两种方法)
2015/08/10 Javascript
js实现左侧网页tab滑动门效果代码
2015/09/06 Javascript
jQuery on()方法绑定动态元素的点击事件无响应的解决办法
2016/07/07 Javascript
详解angularJs指令的3种绑定策略
2017/04/13 Javascript
bootstrap日期控件问题(双日期、清空等问题解决)
2017/04/19 Javascript
详解vue-admin和后端(flask)分离结合的例子
2018/02/12 Javascript
Angular实现的进度条功能示例
2018/02/18 Javascript
bootstrap与pagehelper实现分页效果
2018/12/29 Javascript
nodejs同步调用获取mysql数据时遇到的大坑
2019/03/02 NodeJs
微信小程序转化为uni-app项目的方法示例
2020/05/22 Javascript
解决ant design vue 表格a-table二次封装,slots渲染的问题
2020/10/28 Javascript
[01:09]DOTA2次级职业联赛 - ishow.HMM战队宣传片
2014/12/01 DOTA
[52:32]完美世界DOTA2联赛PWL S2 Magma vs LBZS 第三场 11.18
2020/11/18 DOTA
ubuntu系统下 python链接mysql数据库的方法
2017/01/09 Python
浅谈Python黑帽子取代netcat
2018/02/10 Python
解决安装python库时windows error5 报错的问题
2018/10/21 Python
Python基于滑动平均思想实现缺失数据填充的方法
2019/02/21 Python
数以千计的折扣工业产品:ESE Direct
2018/05/20 全球购物
新西兰优惠网站:Treat Me
2019/07/04 全球购物
Nicole Miller官方网站:纽约女装品牌
2019/09/14 全球购物
Puma印度官网:德国运动品牌
2019/10/06 全球购物
关于责任的演讲稿
2014/05/20 职场文书
公司户外活动总结
2014/07/04 职场文书
放射科岗位职责
2015/02/14 职场文书
义卖募捐活动总结
2015/05/09 职场文书
《大禹治水》教学反思
2016/02/22 职场文书