- 使用了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部分的方法如下：文章来源地址https://www.toymoban.com/news/detail-652532.html
- sum()方法用于计算购物车中商品的总金额。通过使用reduce()方法遍历checkList数组，累加每个商品的价格乘以数量，最终返回总金额。
- handleDel(index, id)方法用于处理删除商品的逻辑。通过使用splice()方法从datalist数组中删除指定索引的商品项，然后使用filter()方法从checkList数组中过滤掉对应的商品项，以保持两个数组的同步。最后调用handleItemChange()方法更新全选框的状态。
- handleAllChange()方法用于处理全选框的改变逻辑。当全选框被点击时，如果全选框被选中，则将datalist数组赋值给checkList数组，表示所有商品被选中；如果全选框未被选中，则将checkList数组清空，表示所有商品都未被选中。
- handleItemChange()方法用于处理商品项选择状态的改变逻辑。当商品项的选择状态发生改变时，如果datalist数组为空，则将全选框的状态设置为未选中；否则，将全选框的状态设置为checkList数组的长度与datalist数组长度相等时表示全选，否则表示未全选。
文章来源：https://www.toymoban.com/news/detail-652532.html
到了这里，关于使用Vue.js框架的指令和事件绑定实现一个购物车的页面布局的文章就介绍完了。如果您还想了解更多内容，请在右上角搜索TOY模板网以前的文章或继续浏览下面的相关文章，希望大家以后多多支持TOY模板网！
