實現功能：全選、單選、購物數量顯示、合計價格顯示
實現效果如下：
思路：
1.數據要利用寫在Postman里面，通過地址來調用Postman里面的數據。
2.寫完數據后，給寫的數據一個名字，然后加上一個空數組，這樣的話我們可以在前面用到我們寫的數組，可以利用v-for指令來得到相關數據內容。
3.設置初始狀態的選中狀態為不選中，給是否選中的值為false就可以。
4.利用計算機屬性computed來撰寫合計總價格、選中數量以及是否全選。總價格為商品數量*商品單價，總的數量等于各個商品的數量之和。
5.當進行商品數量單選或者全選的時候顯示可能會不正常，例如出現01、02這樣的情況，這時候我們需要進行轉換，確保我們的數量是數值類型。
部分核心代碼展示（總價、數量、是否選中）：
?computed: {
? ? ? ? ? ? ? ? totalPrice() {
? ? ? ? ? ? ? ? ? ? let sum = 0;
? ? ? ? ? ? ? ? ? ? for (let item of this.fruitList) {
? ? ? ? ? ? ? ? ? ? ? ? if (item.isChecked) {
? ? ? ? ? ? ? ? ? ? ? ? ? ? sum += item.num * item.price;
? ? ? ? ? ? ? ? ? ? ? ? }
? ? ? ? ? ? ? ? ? ? }
? ? ? ? ? ? ? ? ? ? return sum;
? ? ? ? ? ? ? ? },
? ? ? ? ? ? ? ? totalCount() {
? ? ? ? ? ? ? ? ? ? //初始狀態數量為0
? ? ? ? ? ? ? ? ? ? let count = 0;
? ? ? ? ? ? ? ? ? ? for (let item of this.fruitList) {
? ? ? ? ? ? ? ? ? ? ? ? if (item.isChecked) {
? ? ? ? ? ? ? ? ? ? ? ? ? ? ?//總數量
? ? ? ? ? ? ? ? ? ? ? ? ? ? count += item.num;
? ? ? ? ? ? ? ? ? ? ? ? }
? ? ? ? ? ? ? ? ? ? }
? ? ? ? ? ? ? ? ? ? return count;
? ? ? ? ? ? ? ? },
? ? ? ? ? ? ? ? isAll: {
? ? ? ? ? ? ? ? ? ? set(value) {
? ? ? ? ? ? ? ? ? ? ? ? for (let item of this.fruitList) {
? ? ? ? ? ? ? ? ? ? ? ? ? ? item.isChecked = value;
? ? ? ? ? ? ? ? ? ? ? ? }
? ? ? ? ? ? ? ? ? ? },
? ? ? ? ? ? ? ? ? ? get() {
? ? ? ? ? ? ? ? ? ? ? ? return this.fruitList.every((item) => item.isChecked === true);
? ? ? ? ? ? ? ? ? ? }
? ? ? ? ? ? ? ? }
? ? ? ? ? ? }
最終效果：
)
