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>
                            <button @click='decrement(index)' :disabled="item.count <= 1">-</button>
                            {{item.count}}
                            <button @click='increment(index)'>+</button>
                        <td><button @click="removeHandle(index)">移除</button></td>
                  let totalPrice = 0
                  for (let i = 0; i < this.books.length; i++) {
                    totalPrice += this.books[i].price*this.books[i].count;