vue實(shí)現(xiàn)添加與刪除圖書(shū)功能
先放大圖，當(dāng)我們點(diǎn)擊刪除的時(shí)候，圖書(shū)名單就會(huì)被我們刪掉。當(dāng)我們重新添加回來(lái)或者添加新書(shū)的時(shí)候，我們只需要在添加新書(shū)這里添加即可。
當(dāng)我點(diǎn)擊刪除的時(shí)候，只需要的就是除卻刪除的那一個(gè)書(shū)籍之后剩下的圖書(shū)。
我們先來(lái)看看splice的用法。
splice() 方法向/從數(shù)組中添加/刪除項(xiàng)目，然后返回被刪除的項(xiàng)目。
注釋?zhuān)涸摲椒〞?huì)改變?cè)紨?shù)組
故在刪除書(shū)籍中我們會(huì)用到的方法是
刪掉idx位置的那一種書(shū)，返回剩下的新的書(shū)籍?dāng)?shù)組。
當(dāng)我們點(diǎn)擊添加新書(shū)的時(shí)候，如果新書(shū)的id值比之前的書(shū)籍列表的值大，就添加在書(shū)籍末尾，否則就添加在對(duì)應(yīng)的id處。
我們來(lái)看看添加書(shū)籍的代碼
我們?cè)賮?lái)看看此demo的詳細(xì)代碼
本文升華自圖書(shū)管理實(shí)戰(zhàn)視頻
此詳細(xì)demo見(jiàn)我的github:https://github.com/JserJser/reactWebApp/tree/master/vue-cdn
總結(jié)
以上所述是小編給大家介紹的vue實(shí)現(xiàn)添加與刪除圖書(shū)功能，希望對(duì)大家有所幫助，如果大家有任何疑問(wèn)歡迎給我留言，小編會(huì)及時(shí)回復(fù)大家的！
- 基于VUE選擇上傳圖片并頁(yè)面顯示（圖片可刪除）
- vue圖片加載與顯示默認(rèn)圖片實(shí)例代碼
- Vue實(shí)現(xiàn)點(diǎn)擊顯示不同圖片的效果
- vue+springboot圖片上傳和顯示的示例代碼
- Vue+Vant 圖片上傳加顯示的案例
- 基于Vue2實(shí)現(xiàn)移動(dòng)端圖片上傳、壓縮、拖拽排序、拖拽刪除功能
- Vue + Node.js + MongoDB圖片上傳組件實(shí)現(xiàn)圖片預(yù)覽和刪除功能詳解
- Vue+elementUI實(shí)現(xiàn)多圖片上傳與回顯功能（含回顯后繼續(xù)上傳或刪除）
- vue上傳圖片到oss的方法示例（圖片帶有刪除功能）
- Vue實(shí)現(xiàn)多圖添加顯示和刪除
相關(guān)文章
本篇文章給大家分享了vue2單元測(cè)試環(huán)境搭建的詳細(xì)步驟，對(duì)此有需要的朋友參考學(xué)習(xí)下。2018-05-05
這篇文章主要介紹了解決Vue?input輸入框卡死的問(wèn)題,文中同時(shí)給大家提到了Vue-element中el-input輸入卡頓問(wèn)題及解決方法，本文結(jié)合示例代碼給大家介紹的非常詳細(xì)，需要的朋友可以參考下2022-09-09
在我們使用vue的開(kāi)發(fā)過(guò)程中總會(huì)遇到這樣的場(chǎng)景,封裝自己的業(yè)務(wù)組件,下面這篇文章主要給大家介紹了關(guān)于vue3封裝Notification組件的完整步驟,本文通過(guò)示例代碼介紹的非常詳細(xì),需要的朋友可以參考下2022-03-03
Vue3中的極致防抖/節(jié)流詳解(附常見(jiàn)方式防抖/節(jié)流)
在JavaScript中函數(shù)的防抖和節(jié)流不是什么新鮮話(huà)題,這篇文章主要給大家介紹了關(guān)于Vue3中極致防抖/節(jié)流的相關(guān)資料,文中通過(guò)實(shí)例代碼介紹的非常詳細(xì),需要的朋友可以參考下2023-02-02
這篇文章主要介紹了vue全局使用axios的方法實(shí)例詳解，非常不錯(cuò)，具有一定的參考借鑒價(jià)值,需要的朋友可以參考下2018-11-11
Vue計(jì)算屬性中reduce方法實(shí)現(xiàn)遍歷方式
這篇文章主要介紹了Vue計(jì)算屬性中reduce方法實(shí)現(xiàn)遍歷方式，具有很好的參考價(jià)值，希望對(duì)大家有所幫助。如有錯(cuò)誤或未考慮完全的地方，望不吝賜教2023-03-03
Vue Element UI + OSS實(shí)現(xiàn)上傳文件功能
這篇文章主要為大家詳細(xì)介紹了Vue Element UI + OSS實(shí)現(xiàn)上傳文件功能，文中示例代碼介紹的非常詳細(xì)，具有一定的參考價(jià)值，感興趣的小伙伴們可以參考一下2019-07-07
這篇文章主要介紹了Vue3?全局實(shí)例上掛載屬性方法，本文通過(guò)示例代碼給大家介紹的非常詳細(xì)，對(duì)大家的學(xué)習(xí)或工作具有一定的參考借鑒價(jià)值,需要的朋友可以參考下2023-05-05
詳解如何在 vue 項(xiàng)目里正確地引用 jquery 和 jquery-ui的插件
本篇文章主要介紹了詳解如何在 vue 項(xiàng)目里正確地引用 jquery 和 jquery-ui的插件，具有一定的參考價(jià)值，有興趣的可以了解一下2017-06-06
Vue.use與Vue.prototype的區(qū)別及說(shuō)明
這篇文章主要介紹了Vue.use與Vue.prototype的區(qū)別及說(shuō)明，具有很好的參考價(jià)值，希望對(duì)大家有所幫助。如有錯(cuò)誤或未考慮完全的地方，望不吝賜教2022-12-12