?綜合案例-購物車
需求說明:
????????1. 渲染功能
? ? ? ? ? ? ? ? v-if/v-else v-for :class
? ? ? ? 2. 刪除功能
? ? ? ? ? ? ? ? 點擊傳參 filter過濾覆蓋原數(shù)組
? ? ? ? 3. 修改個數(shù)
? ? ? ? ? ? ? ? 點擊傳參 find找對象
? ? ? ? 4. 全選反選
? ? ? ? ? ? ? ? 計算屬性computed 完整寫法 get/set
? ? ? ? 5. 統(tǒng)計 選中的 總價 和 數(shù)量
? ? ? ? ? ? ? ? 計算屬性conputed reduce條件求和
? ? ? ? 6. 持久化到本地?文章來源：http://www.zghlxwxcb.cn/news/detail-660180.html
? ? ? ? ? ? ? ? watch監(jiān)聽,localStorage, JSON.stringfiy, JSON.parse文章來源地址http://www.zghlxwxcb.cn/news/detail-660180.html
<!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>
<!-- 結(jié)算按鈕 -->
<button>結(jié)算({{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: {
// 水果列表,從本地緩存讀取,|| []: 初始值,一般都是空數(shù)組
fruitList: JSON.parse(localStorage.getItem("list")) || defaultArr,
},
computed: {
// 默認計算屬性:只能獲取不能設(shè)置,要設(shè)置需要寫完整的寫法
// isAll(){
// // 必須所有的小選框都選中,全選按鈕才選中 -> every
// return this.fruitList.every(item => item.isChecked === true)
// }
// 完整寫法 = get + set
isAll:{
get(){
return this.fruitList.every(item => item.isChecked === true)
},
set(value){
// 基于拿到的布爾值,要讓所有的小選框,同步狀態(tài)
this.fruitList.forEach(item => item.isChecked = value)
}
},
// 統(tǒng)計選中的總數(shù) reduce
totalCount(){
return this.fruitList.reduce((sum,item) => {
if (item.isChecked){
// 選中 -> 需要累加
return sum + item.num
}else{
// 沒選中 -> 不需要累加
return sum
}
},0)
},
// 統(tǒng)計選中的總價 num * price
totalPrice(){
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. 根據(jù)ID找到數(shù)組中的對應(yīng)項 -> find
const fruit = this.fruitList.find(item => item.id === id)
//2. 操作 num 數(shù)量
fruit.num--
},
add(id) {
// 1. 根據(jù)ID找到數(shù)組中的對應(yīng)項 -> find
const fruit = this.fruitList.find(item => item.id === id)
//2. 操作 num 數(shù)量
fruit.num++
}
},
// 緩存到本地
watch:{
fruitList:{
deep: true,
handler(newValue){
// 需要將變化后的 newValue 存入本地 (轉(zhuǎn)json)
localStorage.setItem("list",JSON.stringify(newValue))
}
}
}
})
</script>
</body>
</html>到了這里，關(guān)于14-案例:購物車的文章就介紹完了。如果您還想了解更多內(nèi)容，請在右上角搜索TOY模板網(wǎng)以前的文章或繼續(xù)瀏覽下面的相關(guān)文章，希望大家以后多多支持TOY模板網(wǎng)！
![[gtp]購物車案例參考](https://imgs.yssmx.com/Uploads/2024/02/546131-1.png)
