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