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了。今天学的依旧只有一点点，明继续加油！！

`