vue3核心点第3个实例：购物车增删功能

vue3第二章的小案例2—购物车的增减

案例2：商品列表的增减

1） 首先利用模拟数据生成一组商品清单

2） 所有商品的合计金额会根据当前商品的最终单价进行动态计算

3） 当对各项的数量进行调整时，系统将自动更新商品的总金额

4） 点击任意一项对应的删除按键后，该条目将被移除，同时总金额也会随之发生变化

5） 在列表上方新增一条记录时，该数据将被加入列表，并且总金额也会相应调整

做法概述

对需求进行如下分析：

1） 首先利用模拟数据生成一个商品信息集合

该集合应以包含多个对象的数组形式呈现，即类似[{},{},{}]的结构，在视图层的表格组件中可通过遍历方式实现数据展示。

    //html
    <tr v-for="item,index in goodslist" :key='index'>
    						<td>{{ index+1 }}</td>
    						<td>{{ item.name}}</td>
    						<td>{{ item.price }}</td>
    						.