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