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 相关文章推荐
新浪中用来显示flash的函数
Apr 02 Javascript
JavaScript的9个陷阱及评点分析
May 16 Javascript
jQuery中filter()和find()的区别深入了解
Sep 25 Javascript
JS简单实现文件上传实例代码(无需插件)
Nov 15 Javascript
js实现鼠标经过表格行变色的方法
May 12 Javascript
jquery模拟进度条实现方法
Aug 03 Javascript
浅谈jQuery操作类数组的工具方法
Dec 23 Javascript
JavaScript 总结几个提高性能知识点(推荐)
Feb 20 Javascript
js实现简易聊天对话框
Aug 17 Javascript
使用nvm管理不同版本的node与npm的方法
Oct 31 Javascript
react 兄弟组件如何调用对方的方法示例
Oct 23 Javascript
javascript的var与let,const之间的区别详解
Feb 18 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
2019十大人气国漫
2020/03/13 国漫
PHP exif扩展方法开启详解
2014/07/28 PHP
jquery不支持toggle()高(新)版本的问题解决
2016/09/24 PHP
laravel实现分页样式替换示例代码(增加首、尾页)
2017/09/22 PHP
Laravel手动返回错误码示例
2019/10/22 PHP
提高代码性能技巧谈—以创建千行表格为例
2006/07/01 Javascript
javascript 播放器 控制
2007/01/22 Javascript
JS限制上传图片大小不使用控件在本地实现
2012/12/19 Javascript
PHP abstract与interface之间的区别
2013/11/11 Javascript
js的touch事件的实际引用
2014/10/13 Javascript
Javascript window对象详解
2014/11/12 Javascript
JavaScript插件化开发教程 (四)
2015/01/27 Javascript
基于JavaScript实现移动端TAB触屏切换效果
2015/10/20 Javascript
javascript类型系统——日期Date对象全面了解
2016/07/13 Javascript
微信小程序之绑定点击事件实例详解
2017/07/07 Javascript
JavaScript数据结构与算法之二叉树添加/删除节点操作示例
2019/03/01 Javascript
JS 封装父页面子页面交互接口的实例代码
2019/06/25 Javascript
layui添加动态菜单与选项卡 AJAX请求的例子
2019/09/25 Javascript
Vue快速实现通用表单验证的示例代码
2020/01/09 Javascript
Vue实现省市区三级联动
2020/12/27 Vue.js
Python Queue模块详解
2014/11/30 Python
python杀死一个线程的方法
2015/09/06 Python
使用Python+Splinter自动刷新抢12306火车票
2018/01/03 Python
删除python pandas.DataFrame 的多重index实例
2018/06/08 Python
深入分析python中整型不会溢出问题
2018/06/18 Python
浅析python字符串前加r、f、u、l 的区别
2021/01/24 Python
阿联酋彩妆品牌:OUD MILANO
2019/10/06 全球购物
如何处理简单的PHP错误
2015/10/14 面试题
PHP数据运算类型都有哪些
2013/11/05 面试题
室内设计专业学生的自我评价分享
2013/11/27 职场文书
总经理司机岗位职责
2014/02/06 职场文书
医院党建工作总结2015
2015/05/26 职场文书
Python基础之hashlib模块详解
2021/05/06 Python
Python趣味爬虫之用Python实现智慧校园一键评教
2021/05/28 Python
DjangoRestFramework 使用 simpleJWT 登陆认证完整记录
2021/06/22 Python
恶魔之树最顶端的三颗果实 震震果实上榜,第一可以制造岩浆
2022/03/18 日漫