?綜合案例-購物車
需求說明:
????????1. 渲染功能
? ? ? ? ? ? ? ? v-if/v-else v-for :class
? ? ? ? 2. 刪除功能
? ? ? ? ? ? ? ? 點擊傳參 filter過濾覆蓋原數組
? ? ? ? 3. 修改個數
? ? ? ? ? ? ? ? 點擊傳參 find找對象
? ? ? ? 4. 全選反選
? ? ? ? ? ? ? ? 計算屬性computed 完整寫法 get/set
? ? ? ? 5. 統計 選中的 總價 和 數量
? ? ? ? ? ? ? ? 計算屬性conputed reduce條件求和
? ? ? ? 6. 持久化到本地?
? ? ? ? ? ? ? ? watch監聽,localStorage, JSON.stringfiy, JSON.parse
<!DOCTYPE html>
<html lang="en"><head><meta charset="UTF-8"><meta name="viewport" content="width=device-width, initial-scale=1.0"><title>Document</title><style>.active {background-color: azure;}</style></head><body><div id="app"><!-- 頂部banner --><div><img></div><!-- 面包屑 --><div></div><!-- 購物車主體 --><div v-if="fruitList.length > 0"><div><!-- 頭部 --><div><div></div></div><!-- 身體 --><div><div v-for="(item,index) in fruitList" :key="item.id" :class="{active:item.isChecked}"><div><input type="checkbox" v-model="item.isChecked"></div><div><img width="100px" height="50px" :src="item.icon"></div><div>{{item.price}}</div><div><div><!-- :disabled: 禁用 --><button :disabled="item.num<=1" @click="sub(item.id)">-</button><span>{{item.num}}</span><button @click="add(item.id)">+</button></div></div><div>{{ item.num * item.price }}</div><div><button @click="del(item.id)">刪除</button></div></div></div></div><!-- 底部 --><div><!-- 全選 --><label><input type="checkbox" v-model="isAll">全選</label><div><!-- 所有商品總價 --><span>總價:{{totalPrice}} </span><!-- 結算按鈕 --><button>結算({{totalCount}})</button></div></div></div><!-- 空車 --><div v-else>空空如也</div></div><script src="https://cdn.jsdelivr.net/npm/vue@2.7.14/dist/vue.js"></script><script src="https://unpkg.com/axios/dist/axios.min.js"></script><script>// 購物車的默認值const defaultArr = [{id: 1,icon: 'http://autumnfish.cn/static/火龍果.png',isChecked: true,num: 2,price: 6}, {id: 2,icon: 'http://autumnfish.cn/static/荔枝.png',isChecked: false,num: 7,price: 20}, {id: 3,icon: 'http://autumnfish.cn/static/榴蓮.png',isChecked: true,num: 10,price: 50},]const app = new Vue({el: '#app',data: {// 水果列表,從本地緩存讀取,|| []: 初始值,一般都是空數組fruitList: JSON.parse(localStorage.getItem("list")) || defaultArr,},computed: {// 默認計算屬性:只能獲取不能設置,要設置需要寫完整的寫法// isAll(){// // 必須所有的小選框都選中,全選按鈕才選中 -> every// return this.fruitList.every(item => item.isChecked === true)// }// 完整寫法 = get + setisAll:{get(){return this.fruitList.every(item => item.isChecked === true)},set(value){// 基于拿到的布爾值,要讓所有的小選框,同步狀態this.fruitList.forEach(item => item.isChecked = value)}},// 統計選中的總數 reducetotalCount(){return this.fruitList.reduce((sum,item) => {if (item.isChecked){// 選中 -> 需要累加return sum + item.num}else{// 沒選中 -> 不需要累加return sum}},0)},// 統計選中的總價 num * pricetotalPrice(){return this.fruitList.reduce((sum,item) => {if (item.isChecked){return sum + item.num * item.price}else{return sum}},0)}},methods: {del(id) {this.fruitList = this.fruitList.filter(item => item.id != id)},sub(id) {// 1. 根據ID找到數組中的對應項 -> findconst fruit = this.fruitList.find(item => item.id === id)//2. 操作 num 數量fruit.num--},add(id) {// 1. 根據ID找到數組中的對應項 -> findconst fruit = this.fruitList.find(item => item.id === id)//2. 操作 num 數量fruit.num++}},// 緩存到本地watch:{fruitList:{deep: true,handler(newValue){// 需要將變化后的 newValue 存入本地 (轉json)localStorage.setItem("list",JSON.stringify(newValue))}}}})</script></body></html>
