如图所示，首先数据源来至于JSON ，自己去导即可：
文件分布分为3部分 html vue代码 和 c3样式
提示 关于表格遍历你可以这样写：
<tr v-for="item in books"> <td v-for="i in item">{{i}}</td> </tr>
但是这样的遍历 仅此适用于直接显示【因为图中 有加按钮 和 其他字符 所以不适合这样】，一般都是这样下面这样：【下面为最终完全代码】
先弄样式：store.css:
table{ border: 1px coral solid; border-collapse: collapse; border-spacing: 0; } th,td{ padding: 8px 16px; border: 1px solid coral; text-align: left; } th{ background-color: #f7f7f7; color: black; font-weight: 600; }
然后VUE代码：
store.js:
const app = new Vue({ el: "#app", data: { //books：JSON格式数据 books: [ { id:1, name:"《JavaScript入门到入土》", date:"2020-12-12", price:59.00, count:1 }, { id:2, name:"《JQuery入门到放弃》", date:"2019-05-23", price:44.00, count:1 }, { id:3, name:"《VUE 初始到初犯》", date:"2020-03-06", price:125.00, count:1 }, { id:4, name:"《HTML5入门到入坟》", date:"2018-02-03", price:66.00, count:1 }, { id:5, name:"《CSS3 重新开始到裂开》", date:"2021-05-05", price:30.50, count:1 }, ], }, methods:{ //显示价钱 保留两位小数 showPrice(value){ return '￥' + value.toFixed(2) }, //添加书的数量 addCount(index){ this.books[index].count++; }, //减少书的数量 subCount(index){ this.books[index].count--; }, //移除商品 RemoveHandle(index){ this.books.splice(index,1); } }, computed:{ totalPrice(){ let sum = 0; for (let i = 0; i < this.books.length; i++) { sum += this.books[i].price * this.books[i].count; } return sum.toFixed(2); } } })
其次 H5 代码：
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>购物车</title> <link rel="stylesheet" href="c3/store.css"> </head> <body> <div id="app"> <div v-if="this.books.length != 0"> <table> <!-- 表头 --> <thead> <tr> <th>id</th> <th>书籍名称</th> <th>出版日期</th> <th>价格</th> <th>购买数量</th> <th>操作</th> </tr> </thead> <!-- 表体 --> <tbody> <tr v-for="(item,index) in books"> <td>{{item.id}}</td> <td>{{item.name}}</td> <td>{{item.date}}</td> <td>{{showPrice(item.price)}}</td><!--这里直接用方法保留两位小数--> <td> <button @click="subCount(index)" :disabled="item.count <= 1">-</button> <!--善用条件 来判断是否为1 是的话按钮禁止--> {{item.count}} <button @click="addCount(index)">+</button> </td> <td> <button @click="RemoveHandle(index)">移除</button> </td> </tr> </tbody> </table> <h2>总价钱：{{totalPrice}}</h2> </div> <p v-else>您的购物车为空！</p> </div> <script src="js/vue.js"></script> <script src="js/store.js"></script> </body> </html>
案例总结：
1.其实里面有些东西可以用到过滤器，但是我这个VUE没有过滤器这个东西，所以呢就没用，过滤器可以自己去了解了解即可，
2.最顶部的内个if else 是做一个空判断的，为空就显示您的购物车为空
3.总价钱用的是for循环，其实可以升级一下 for of 循环的
4.关于遍历表格 v-for ，因为有些表格有其他按钮什么的 所以用这种，如果光是遍历 可以用最上面内种.
5.移除内个操作 ，其实直接用万能方法 splice 即可.
6.其实多用内些语法糖绑定 + 表达式，因为超级好用
7.善用内个 index （v-for） 的index
8.多练多用多记