web购物车案例

购物车案例实现
准备工作
index.HTML
连接css文件

连接js文件 框架搭建: 书籍名称 出版日期 价格 购买数量 操作 : {{item.id}} {{item.name}} {{item.data}} {{item.price | showPrice}} - {{item.count}} + 移除 因为在遍历时每列的元素还要进行个别处理，所以在显示时采用进行显示 style.css样式 table{ border: 1px solid #e9e9e9; border-collapse: collapse; border-spacing: 0; } ​ tr,td{ padding: 8px 16px; border: 1px solid #E9E9E9; text-align: left; } ​ th{ background-color: #f7f7f7; color: #5c6b77; font-weight: 600; } ​index.js data传入数组 data:{ books:[ { id:1, name:'《算法导论》', data:'2006-9', price:85.00, count:1 }, { id:2, name:'《UNIX的编程艺术》', data:'2006-2', price:59.00, count:1 }, { id:3, name:'《编程珠玑》', data:'2008-10', price:39.00, count:1 }, { id:4, name:'《代码大全》', data:'2006-4', price:128.00, count:1 }] filters过滤器：过滤器中可以定义一个方法 filters:{ showPrice(price){ return '￥'+ price.toFixed(2) } } 过滤器的使用，在要使用过滤器的元素后增加 | ，然后加上过滤器列的修改count + - 的点击触发事件 要求： 点击每列的+ - 按钮，可以对应的修改count值，并且在count<=1时，按钮 - 不可以再被触发点击每列的+ - 按钮，可以实现count的变化，这时就应该使用到index首先在button按钮中增加@click事件，分别指定函数increment（）、decrement（），因为要使用index来识别各列，所以要传入参数index