如图所示，首先数据源来至于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.多练多用多记
作者：咸瑜