mood：
今天心情还不错，老早就醒了，很有精神。
跟着老师做一个简易购物车案例
搭建界面，数据是自己写死的，放在Vue的data中，数组中包含对象，创建简单的ul >li 后使用 v-for把数据遍历出来放到表格（table）中，再加入功能按钮，最后用v-if设置一个当购物车界面数据清零时显示购物车为空。
（在把数据写入data中时，一直在数组最上方有报错（TS1005 (JS) 应为“,”.）百度说是
vscode自身语法检查有问题，解决方案我在CSDN看的这位大哥的https://blog.csdn.net/Alex_ddC/article/details/111479662
很详细，改一个设置就可以了）
<tr v-for="(item,index) in books">
<td>{{item.id}}</td>
<td>{{item.name}}</td>
<td>{{item.date}}</td>
<td>{{item.price | showPrice}}</td>
<td>
<button @click='decrement(index)' :disabled="item.count <= 1">-</button>
{{item.count}}
<button @click='increment(index)'>+</button>
</td>
<td><button @click="removeHandle(index)">移除</button></td>
</tr>
如图
image.png
对加减功能、移除功能按钮进行绑定点击事件
increment(index){
// console.log(111111)
this.books[index].count++
},
decrement(index){
this.books[index].count--
},
removeHandle(index){
this.books.splice(index,1)
}
最后再计算属性computed中写出求总价格的方法
totalPrice(){
let totalPrice = 0
for (let i = 0; i < this.books.length; i++) {
totalPrice += this.books[i].price*this.books[i].count;
}
return totalPrice
}
然后就OK了。今天学的依旧只有一点点，明继续加油！！
`
