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 相关文章推荐
prototype与jquery下Ajax实现的差别
Sep 13 Javascript
基于JQuery实现CheckBox全选全不选
Jun 27 Javascript
jquery ajax 同步异步的执行 return值不能取得的解决方案
Jan 08 Javascript
jQuery筛选器children()案例详解(图文)
Feb 17 Javascript
原生js实现给指定元素的后面追加内容
Apr 10 Javascript
JavaScript判断DIV内容是否为空的方法
Jan 29 Javascript
JQuery导航菜单选择特效
Apr 11 Javascript
HTML5 js实现拖拉上传文件功能
Nov 20 Javascript
javascript中的面向对象
Mar 30 Javascript
浅谈express.js框架中间件(middleware)
Apr 07 Javascript
Vue事件修饰符native、self示例详解
Jul 09 Javascript
小程序点餐界面添加购物车左右摆动动画
Sep 23 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(一)
2012/03/21 PHP
PHP 生成微信红包代码简单
2016/03/25 PHP
PHP设计模式之原型设计模式原理与用法分析
2018/04/25 PHP
PHP PDOStatement::errorCode讲解
2019/01/31 PHP
JavaScript是如何实现继承的(六种方式)
2016/03/31 Javascript
Javascript实现前端简单的路由实例
2016/09/11 Javascript
JS图片轮播与索引变色功能实例详解
2017/07/06 Javascript
Vue实现搜索 和新闻列表功能简单范例
2018/03/16 Javascript
vue项目移动端实现ip输入框问题
2019/03/19 Javascript
React 父子组件通信的实现方法
2019/12/05 Javascript
[01:00]DOTA2 store: Collection of Artisan's Wonders
2015/08/12 DOTA
让python的Cookie.py模块支持冒号做key的方法
2010/12/28 Python
Python利用正则表达式匹配并截取指定子串及去重的方法
2015/07/30 Python
Python连接DB2数据库
2016/08/27 Python
Python heapq使用详解及实例代码
2017/01/25 Python
微信跳一跳python辅助软件思路及图像识别源码解析
2018/01/04 Python
python通过伪装头部数据抵抗反爬虫的实例
2018/05/07 Python
python使用pdfminer解析pdf文件的方法示例
2018/12/20 Python
Django框架中间件(Middleware)用法实例分析
2019/05/24 Python
基于python 凸包问题的解决
2020/04/16 Python
解决python执行较大excel文件openpyxl慢问题
2020/05/15 Python
获取python运行输出的数据并解析存为dataFrame实例
2020/07/07 Python
世界上最大的折扣香水店:FragranceNet.com
2016/10/26 全球购物
复古斯堪的纳维亚儿童服装:Baby go Retro
2017/09/09 全球购物
JackJones官方旗舰店:杰克琼斯男装
2018/03/27 全球购物
英国水族馆和池塘用品购物网站:Warehouse Aquatics
2019/08/29 全球购物
澳大利亚领先的女性运动服品牌:Lorna Jane
2020/06/19 全球购物
Linux如何修改文件和文件夹的权限
2012/06/27 面试题
无故旷工检讨书
2014/01/26 职场文书
学校拾金不昧表扬信
2015/01/16 职场文书
大二学年个人总结
2015/03/03 职场文书
污水处理保证书
2015/05/09 职场文书
刑事案件上诉状
2015/05/23 职场文书
主题班会开场白
2015/06/01 职场文书
MySQL中IF()、IFNULL()、NULLIF()、ISNULL()函数的使用详解
2021/06/26 MySQL
微信小程序 根据不同用户切换不同TabBar
2022/04/21 Javascript