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 相关文章推荐
JS模拟面向对象全解(二、类型与赋值)
Jul 13 Javascript
JavaScript面向对象设计二 构造函数模式
Dec 20 Javascript
可恶的ie8提示缺少id未定义
Mar 20 Javascript
jQuery瀑布流插件Wookmark使用实例
Apr 02 Javascript
Javascript封装DOMContentLoaded事件实例
Jun 12 Javascript
Bootstrap每天必学之前端开发框架
Nov 19 Javascript
易操作的jQuery表单提示插件
Dec 01 Javascript
通过命令行创建vue项目的方法
Jul 20 Javascript
详谈表单重复提交的三种情况及解决方法
Aug 16 Javascript
详解各版本React路由的跳转的方法
May 10 Javascript
2020京东618叠蛋糕js脚本(亲测好用)
Jun 02 Javascript
JavaScript实现拖拽和缩放效果
Aug 24 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的范围解析操作符(::)的含义分析说明
2011/07/03 PHP
php上传图片获取路径及给表单字段赋值的方法
2016/01/23 PHP
Zend Framework教程之Zend_Helpers动作助手ViewRenderer用法详解
2016/07/20 PHP
使用PHPMailer发送邮件实例
2017/02/15 PHP
Laravel 默认邮箱登录改成用户名登录的实现方法
2019/08/12 PHP
jQuery 学习第六课 实现一个Ajax的TreeView
2010/05/17 Javascript
JQuery AJAX提交中文乱码的解决方案
2010/07/02 Javascript
JSON JQUERY模板实现说明
2010/07/03 Javascript
jQuery学习笔记之Helloworld
2010/12/22 Javascript
分别用marquee和div+js实现首尾相连循环滚动效果,仅3行代码
2011/09/21 Javascript
js的alert弹出框出现乱码解决方案
2013/09/02 Javascript
JavaScript实现点击按钮直接打印
2016/01/06 Javascript
jQuery动画效果实现图片无缝连续滚动
2016/01/12 Javascript
JavaScript判断DIV内容是否为空的方法
2016/01/29 Javascript
bootstrap3 兼容IE8浏览器!
2016/05/02 Javascript
老生常谈 js中this的指向
2016/06/30 Javascript
Java  Spring 事务回滚详解
2016/10/17 Javascript
angular实现spa单页面应用实例
2017/07/10 Javascript
Vue2.0利用vue-resource上传文件到七牛的实例代码
2017/07/28 Javascript
ES6学习笔记之map、set与数组、对象的对比
2018/03/01 Javascript
Vue+Node实现商品列表的分页、排序、筛选,添加购物车功能详解
2019/12/07 Javascript
[00:32]2018DOTA2亚洲邀请赛iG出场
2018/04/03 DOTA
[01:03:41]DOTA2-DPC中国联赛 正赛 Dynasty vs XG BO3 第三场 2月2日
2021/03/11 DOTA
简单理解Python中基于生成器的状态机
2015/04/13 Python
在Python下进行UDP网络编程的教程
2015/04/29 Python
python压缩文件夹内所有文件为zip文件的方法
2015/06/20 Python
python实现逆序输出一个数字的示例讲解
2018/06/25 Python
Pytorch释放显存占用方式
2020/01/13 Python
Python Tkinter Entry和Text的添加与使用详解
2020/03/04 Python
潘多拉珠宝美国官方网站:Pandora US
2020/06/18 全球购物
怎么处理XML的中文问题
2015/03/26 面试题
独生子女证明范本
2015/06/19 职场文书
小学教师师德培训心得体会
2016/01/09 职场文书
Element实现动态表格的示例代码
2021/08/02 Javascript
Netflix《海贼王》真人版剧集多张片场照曝光
2022/04/04 日漫
nginx lua 操作 mysql
2022/05/15 Servers