一.案例需求:
1.书籍有选中与取消选中的功能,然后每本书籍右上角都有删除按钮,点击就会将书籍删除,效果如下图所示:
二. 源码:
1.html部分
![](https://img-blog.csdnimg.cn/20211004142213551.png?x-oss-process=image/watermark,type_ZHJvaWRzYW5zZmFsbGJhY2s,shadow_50,text_Q1NETiBAbG9nLmNoZW5n,size_20,color_FFFFFF,t_70,g_se,x_16)
2.js部分 :
![](https://img-blog.csdnimg.cn/2021100414225637.png?x-oss-process=image/watermark,type_ZHJvaWRzYW5zZmFsbGJhY2s,shadow_50,text_Q1NETiBAbG9nLmNoZW5n,size_20,color_FFFFFF,t_70,g_se,x_16)
3.css部分:
![](https://img-blog.csdnimg.cn/20211004142338612.png?x-oss-process=image/watermark,type_ZHJvaWRzYW5zZmFsbGJhY2s,shadow_50,text_Q1NETiBAbG9nLmNoZW5n,size_20,color_FFFFFF,t_70,g_se,x_16)
三.技术讲解:
1.主利用 vue 框架和 element 组件库完成页面布局,然后主要利用css的 hover 属性和transform动画属性完成书籍和右上角删除按钮的选择与否效果,
2.运用axios请求数据,
3.运用splice方法操作数组完成删除效果
4.运用calssName.remove 和 className.add 完成dom元素添加和删除类名的方式.来展示书籍选中与否的效果