购物车渲染案例

一.案例需求:

1.书籍有选中与取消选中的功能,然后每本书籍右上角都有删除按钮,点击就会将书籍删除,效果如下图所示: 

二. 源码:

1.html部分

 2.js部分 :

 3.css部分: 

三.技术讲解:
1.主利用 vue 框架和 element 组件库完成页面布局,然后主要利用css的 hover 属性和transform动画属性完成书籍和右上角删除按钮的选择与否效果,

2.运用axios请求数据,

3.运用splice方法操作数组完成删除效果

4.运用calssName.remove 和 className.add 完成dom元素添加和删除类名的方式.来展示书籍选中与否的效果