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 相关文章推荐
使用EXT实现无刷新动态调用股票信息
Nov 01 Javascript
javascript this用法小结
Dec 19 Javascript
Javascript实现检测客户端类型代码封包
Dec 03 Javascript
jQuery+ajax实现实用的点赞插件代码
Jul 06 Javascript
HTML5 canvas 9绘制图片实例详解
Sep 06 Javascript
JS前端开发判断是否是手机端并跳转操作(小结)
Feb 05 Javascript
在vue中获取dom元素内容的方法
Jul 10 Javascript
JavaScript全屏和退出全屏事件总结(附代码)
Aug 17 Javascript
浅析JS抽象工厂模式
Dec 14 Javascript
webpack实现一个行内样式px转vw的loader示例
Sep 13 Javascript
解决vue 使用setTimeout,离开当前路由setTimeout未销毁的问题
Jul 21 Javascript
vue实现Toast组件轻提示
Apr 10 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
You might like
1982年日本摄影师镜头下的中国孩子 那无忧无虑的童年
2020/03/12 杂记
php is_file 判断给定文件名是否为一个正常的文件
2010/05/10 PHP
php中调用其他系统http接口的方法说明
2014/02/28 PHP
php定义数组和使用示例(php数组的定义方法)
2014/03/29 PHP
destoon实现公司新闻详细页添加评论功能的方法
2014/07/15 PHP
解决出现SoapFault (looks like we got no XML document)的问题
2017/06/24 PHP
PHP tp5中使用原生sql查询代码实例
2020/10/28 PHP
禁止JQuery中的load方法装载IE缓存中文件的方法
2009/09/11 Javascript
javascript实现画不相交的圆
2015/04/07 Javascript
JavaScript获取页面中超链接数量的方法
2015/11/09 Javascript
Javascript对象字面量的理解
2016/06/22 Javascript
JavaScript中const、var和let区别浅析
2016/10/11 Javascript
NodeJS实现微信公众号关注后自动回复功能
2017/05/31 NodeJs
JS实现多物体运动的方法详解
2018/01/23 Javascript
Vue实现简单的留言板
2020/10/23 Javascript
WebPack工具运行原理及入门教程
2020/12/02 Javascript
利用python编写一个图片主色转换的脚本
2017/12/07 Python
Python实现的rsa加密算法详解
2018/01/24 Python
python书籍信息爬虫实例
2018/03/19 Python
解决python3中cv2读取中文路径的问题
2018/12/05 Python
python 在某.py文件中调用其他.py内的函数的方法
2019/06/25 Python
Python3 元组tuple入门基础
2020/02/09 Python
世界首屈一指的钓鱼用品商店:TackleDirect
2016/07/26 全球购物
荟萃全球保健品:维他购
2018/05/09 全球购物
意大利独特而优质的家居用品:Fazzini
2018/12/05 全球购物
Daisy London官网:英国最大的首饰集团IBB旗下
2019/02/28 全球购物
北大自主招生自荐信
2013/10/19 职场文书
计算机专业毕业生自荐信
2013/12/31 职场文书
两只小狮子教学反思
2014/02/05 职场文书
酒店开业庆典策划方案
2014/05/28 职场文书
物业品质提升方案
2014/06/08 职场文书
运动会演讲稿50字
2014/08/25 职场文书
森马旗舰店双十一营销方案
2014/09/29 职场文书
医生学习党的群众路线教育实践活动心得体会
2014/11/03 职场文书
2016优秀护士求职自荐信
2016/01/28 职场文书
PyTorch中的torch.cat简单介绍
2022/03/17 Python