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 相关文章推荐
javascript实现文本域写入字符时限定字数
Feb 12 Javascript
js function定义函数的几种不错方法
Feb 27 Javascript
jquery实现textarea 高度自适应
Mar 11 Javascript
jQuery简单实现仿京东分类导航层效果
Jun 07 Javascript
详解用vue-cli来搭建vue项目和webpack
Apr 20 Javascript
JS实现为动态创建的元素添加事件操作示例
Mar 17 Javascript
JavaScript中字符串的常用操作方法及特殊字符
Mar 18 Javascript
《javascript少儿编程》location术语总结
May 27 Javascript
jQuery AJAX与jQuery事件的分析讲解
Feb 18 jQuery
vue中typescript装饰器的使用方法超实用教程
Jun 17 Javascript
vue.js this.$router.push获取不到params参数问题
Mar 03 Javascript
javascript解析json格式的数据方法详解
Aug 07 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 高手之路(一)
2006/10/09 PHP
php+mysql开源XNA 聚合程序发布 下载
2007/07/13 PHP
在PHP中使用Sockets 从Usenet中获取文件
2008/01/10 PHP
利用PHP将图片转换成base64编码的实现方法
2016/09/13 PHP
PHP守护进程化在C和PHP环境下的实现
2017/11/21 PHP
JS backgroundImage控制
2009/05/19 Javascript
checkbox设置复选框的只读效果不让用户勾选
2013/08/12 Javascript
JS的数组迭代方法
2015/02/05 Javascript
详解JavaScript中的自定义事件编写
2016/05/10 Javascript
HTML5基于Tomcat 7.0实现WebSocket连接并实现简单的实时聊天
2016/10/31 Javascript
浅析location.href跨窗口调用函数
2016/11/22 Javascript
JavaScript字符串_动力节点Java学院整理
2017/06/27 Javascript
vue在使用ECharts时的异步更新和数据加载详解
2017/11/22 Javascript
koa router 多文件引入的方法示例
2019/05/22 Javascript
angular使用md5,CryptoJS des加密的方法
2019/06/03 Javascript
VUEX 数据持久化,刷新后重新获取的例子
2019/11/12 Javascript
Vue表单提交点击事件只允许点击一次的实例
2020/10/23 Javascript
Python生成随机密码
2015/03/10 Python
python中reduce()函数的使用方法示例
2017/09/29 Python
BP神经网络原理及Python实现代码
2018/12/18 Python
pycharm双击无响应(打不开问题解决办法)
2020/01/10 Python
python中安装django模块的方法
2020/03/12 Python
Django values()和value_list()的使用
2020/03/31 Python
Tensorflow实现将标签变为one-hot形式
2020/05/22 Python
西班牙拥有最佳品牌的动物商店:Animalear.com
2018/01/05 全球购物
小学生开学感言
2014/02/28 职场文书
年终总结会主持词
2014/03/25 职场文书
初中新生军训方案
2014/05/13 职场文书
校优秀毕业生主要事迹
2014/05/26 职场文书
学习优秀党员杨宗兴先进事迹材料思想汇报
2014/09/14 职场文书
井冈山红色之旅感想
2014/10/07 职场文书
2015年库房工作总结
2015/04/30 职场文书
2015年科研工作总结范文
2015/05/13 职场文书
关于保护环境的建议书
2019/06/24 职场文书
一看就懂的MySQL的聚簇索引及聚簇索引是如何长高的
2021/05/25 MySQL
Android中的Launch Mode详情
2022/06/05 Java/Android