vue實現添加與刪除圖書功能
更新時間：2018年10月07日 10:07:53 作者：jser_dimple
這篇文章主要介紹了vue實現添加與刪除圖書功能，非常不錯，具有一定的參考借鑒價值,需要的朋友可以參考下
先放大圖，當我們點擊刪除的時候，圖書名單就會被我們刪掉。當我們重新添加回來或者添加新書的時候，我們只需要在添加新書這里添加即可。
當我點擊刪除的時候，只需要的就是除卻刪除的那一個書籍之后剩下的圖書。
我們先來看看splice的用法。
splice() 方法向/從數組中添加/刪除項目，然后返回被刪除的項目。
注釋：該方法會改變原始數組
故在刪除書籍中我們會用到的方法是
刪掉idx位置的那一種書，返回剩下的新的書籍數組。
當我們點擊添加新書的時候，如果新書的id值比之前的書籍列表的值大，就添加在書籍末尾，否則就添加在對應的id處。
我們來看看添加書籍的代碼
我們再來看看此demo的詳細代碼
本文升華自圖書管理實戰(zhàn)視頻
此詳細demo見我的github:https://github.com/JserJser/reactWebApp/tree/master/vue-cdn
總結
以上所述是小編給大家介紹的vue實現添加與刪除圖書功能，希望對大家有所幫助，如果大家有任何疑問歡迎給我留言，小編會及時回復大家的！
相關文章
這篇文章主要為大家詳細介紹了如何使用Vue實現點擊按鈕小球加入購物車動畫,文中的示例代碼講解詳細,有需要的小伙伴可以跟隨小編一起學習一下2024-03-03
這篇文章主要介紹了vue.config.js中的devServer使用方式,具有很好的參考價值,希望對大家有所幫助,如有錯誤或未考慮完全的地方,望不吝賜教2024-03-03
要實現不同角色登錄跳轉不同的前端頁面,可以在登錄成功后,根據用戶的角色信息,使用路由跳轉到不同的頁面,這篇文章主要給大家介紹了關于前端實現不同角色登入展示不同頁面效果的相關資料,需要的朋友可以參考下2024-08-08
這篇文章主要介紹了Vue中的Props(不可變狀態(tài)),本文通過實例代碼給大家介紹的非常詳細，具有一定的參考借鑒價值，需要的朋友可以參考下2018-09-09
在本篇文章里小編給大家分享了關于VUE中使用MUI方法和步驟，有需要的朋友們可以學習參考下。2019-02-02
這篇文章主要給大家介紹了關于vue3+Naive?UI數據表格基本使用方式詳的相關資料,Naive?UI是一個基于Typescript開發(fā)的針對Vue3開發(fā)的UI組件庫,由TuSimple(圖森未來)公司開發(fā)并開源,需要的朋友可以參考下2023-08-08
EasyPlayer.js是集播放http-flv,?hls,?websocket?于一身的H5視頻直播/視頻點播播放器,?使用簡單,?功能強大，下面大家就跟隨小編一起學習一下它的具體使用吧2023-08-08
父子組件之間的通信就是props down,events up,父組件通過屬性props向下傳遞數據給子組件,子組件通過事件events 給父組件發(fā)送消息,這篇文章主要給大家介紹了關于vue中組件的props屬性的相關資料,需要的朋友可以參考下2021-11-11
VueNative是一個使用JavaScript構建跨平臺原生移動應用程序的框架m這篇文章主要給大家介紹了關于如何利用Vue Native構建移動應用的相關資料,文中通過示例代碼介紹的非常詳細,對大家的學習或者工作具有一定的參考學習價值,需要的朋友可以參考下2021-08-08
指令是Vue模板中最常用的一項功能，它帶有前綴v-，主要職責是當其表達式的值改變時，相應的將某些行為應用在 DOM 上。這篇文章主要介紹了vue內置指令詳解,需要的朋友可以參考下2018-04-04