- 使用了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數組長度相等時表示全選，否則表示未全選。
)
_面向對象編程)
