- 使用了v-model指令来实现全选/全不选的功能，当全选框被点击时，isAllChecked的值会被改变。
- 使用了v-if指令来判断购物车中是否有商品，如果有商品则渲染商品列表，否则显示购物车为空的提示。
- 使用了v-for指令来遍历datalist数组，渲染每个商品项。
- 使用了@change事件来监听商品项的选择状态改变，当商品项被选中或取消选中时，handleItemChange方法会被调用。
- 使用了@click事件来监听减少数量和增加数量按钮的点击事件，分别调用item.number–和item.number++来改变商品数量。
- 使用了:disable属性绑定来控制减少数量和增加数量按钮的禁用状态。
- 使用了@click事件来监听删除按钮的点击事件，调用handleDel方法来删除对应的商品项
<!DOCTYPE html>
<html lang="en"><head><meta charset="UTF-8" /><meta name="viewport" content="width=device-width, initial-scale=1.0" /><title>Document</title><script src="vue.js"></script><style>li {display: flex;justify-content: space-between;align-items: center;padding: 10px;border: 1px solid red;}li img {width: 100px;}</style></head><body><div id="box"><ul><li><inputtype="checkbox"v-model="isAllChacked"@click="handleAllChange"/><span>全选/全不选</span></li><template v-if="datalist.length"><li v-for="(item,index) in datalist" :key="item.id"><div><inputtype="checkbox"v-model="checkList":value="item"@change="handleItemChange"/></div><div><img :src="item.poster" alt="" /></div><div><div>{{item.title}}</div><div style="color: red">价格：{{item.price}}</div></div><div><button @click="item.number--" :disable="item.number===1">-</button>{{item.number}}<button@click="item.number++":disable="item.number===item.limit">+</button></div><div><button @click="handleDel(index,item.id)">删除</button></div></li></template><li v-else>购物车空空如也</li><li><div>总金额：{{sum()}}</div></li></ul></div><script>var obj = {data() {return {isAllChecked: false,chackList: [],datalist: [{id: 1,title: "商品1",price: 10,number: 1,poster:"https://gw.alicdn.com/bao/uploaded/i3/698598873/O1…wOdNnz2FPt9klYrZk_!!0-item_pic.jpg_300x300q90.jpg",limit: 5,},{id: 2,title: "商品2",price: 20,number: 2,poster:" https://t8.baidu.com/it/u=4043579294,4057690895&fm…sec=1692118800&t=acd1394b1a053e97133a40c0289677f9",limit: 6,},{id: 3,title: "商品3",price: 30,number: 3,poster:"https://gw.alicdn.com/bao/uploaded/i3/698598873/O1…wOdNnz2FPt9klYrZk_!!0-item_pic.jpg_300x300q90.jpg",limit: 7,},],};},methods: {sum() {return this.checkList.reduce((total, item) => total + item.price * item.number,0);},handleDel(index, id) {this.datalist.splice(index, 1);//同步更新数组this.chackList = this.chackList.filter((item) => item.id !== id);this.handleItemChange();},handleAllChange() {this.chackList = this.isAllChecked ? this.datalist : [];},handleItemChange() {if (this.datalist.length === 0) {this.isAllChecked = false;return;}this.isAllChecked = this.checkList.length === this.datalist.length;},},};var app = Vue.createApp(obj).mount("#box");</script></body>
</html>methods部分的方法如下：
- sum()方法用于计算购物车中商品的总金额。通过使用reduce()方法遍历checkList数组，累加每个商品的价格乘以数量，最终返回总金额。
- handleDel(index, id)方法用于处理删除商品的逻辑。通过使用splice()方法从datalist数组中删除指定索引的商品项，然后使用filter()方法从checkList数组中过滤掉对应的商品项，以保持两个数组的同步。最后调用handleItemChange()方法更新全选框的状态。
- handleAllChange()方法用于处理全选框的改变逻辑。当全选框被点击时，如果全选框被选中，则将datalist数组赋值给checkList数组，表示所有商品被选中；如果全选框未被选中，则将checkList数组清空，表示所有商品都未被选中。
- handleItemChange()方法用于处理商品项选择状态的改变逻辑。当商品项的选择状态发生改变时，如果datalist数组为空，则将全选框的状态设置为未选中；否则，将全选框的状态设置为checkList数组的长度与datalist数组长度相等时表示全选，否则表示未全选。
)
_面向对象编程)
