- 使用了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>
<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">价格:{{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数组长度相等时表示全选,否则表示未全选。