- 使用了v-model指令來(lái)實(shí)現(xiàn)全選/全不選的功能，當(dāng)全選框被點(diǎn)擊時(shí)，isAllChecked的值會(huì)被改變。
- 使用了v-if指令來(lái)判斷購(gòu)物車中是否有商品，如果有商品則渲染商品列表，否則顯示購(gòu)物車為空的提示。
- 使用了v-for指令來(lái)遍歷datalist數(shù)組，渲染每個(gè)商品項(xiàng)。
- 使用了@change事件來(lái)監(jiān)聽商品項(xiàng)的選擇狀態(tài)改變，當(dāng)商品項(xiàng)被選中或取消選中時(shí)，handleItemChange方法會(huì)被調(diào)用。
- 使用了@click事件來(lái)監(jiān)聽減少數(shù)量和增加數(shù)量按鈕的點(diǎn)擊事件，分別調(diào)用item.number–和item.number++來(lái)改變商品數(shù)量。
- 使用了:disable屬性綁定來(lái)控制減少數(shù)量和增加數(shù)量按鈕的禁用狀態(tài)。
- 使用了@click事件來(lái)監(jiān)聽刪除按鈕的點(diǎn)擊事件，調(diào)用handleDel方法來(lái)刪除對(duì)應(yīng)的商品項(xiàng)
<!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>
<input
type="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>
<input
type="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">價(jià)格：{{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>購(gòu)物車空空如也</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);
//同步更新數(shù)組
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部分的方法如下：文章來(lái)源地址http://www.zghlxwxcb.cn/news/detail-652532.html
- sum()方法用于計(jì)算購(gòu)物車中商品的總金額。通過(guò)使用reduce()方法遍歷checkList數(shù)組，累加每個(gè)商品的價(jià)格乘以數(shù)量，最終返回總金額。
- handleDel(index, id)方法用于處理刪除商品的邏輯。通過(guò)使用splice()方法從datalist數(shù)組中刪除指定索引的商品項(xiàng)，然后使用filter()方法從checkList數(shù)組中過(guò)濾掉對(duì)應(yīng)的商品項(xiàng)，以保持兩個(gè)數(shù)組的同步。最后調(diào)用handleItemChange()方法更新全選框的狀態(tài)。
- handleAllChange()方法用于處理全選框的改變邏輯。當(dāng)全選框被點(diǎn)擊時(shí)，如果全選框被選中，則將datalist數(shù)組賦值給checkList數(shù)組，表示所有商品被選中；如果全選框未被選中，則將checkList數(shù)組清空，表示所有商品都未被選中。
- handleItemChange()方法用于處理商品項(xiàng)選擇狀態(tài)的改變邏輯。當(dāng)商品項(xiàng)的選擇狀態(tài)發(fā)生改變時(shí)，如果datalist數(shù)組為空，則將全選框的狀態(tài)設(shè)置為未選中；否則，將全選框的狀態(tài)設(shè)置為checkList數(shù)組的長(zhǎng)度與datalist數(shù)組長(zhǎng)度相等時(shí)表示全選，否則表示未全選。
文章來(lái)源：http://www.zghlxwxcb.cn/news/detail-652532.html
到了這里，關(guān)于使用Vue.js框架的指令和事件綁定實(shí)現(xiàn)一個(gè)購(gòu)物車的頁(yè)面布局的文章就介紹完了。如果您還想了解更多內(nèi)容，請(qǐng)?jiān)谟疑辖撬阉鱐OY模板網(wǎng)以前的文章或繼續(xù)瀏覽下面的相關(guān)文章，希望大家以后多多支持TOY模板網(wǎng)！
