- 渲染的时候注意购物车整体和空车不能同时出现
- 渲染时style和前面选中的关系
- 删除filter
- 修改个数时需要先通过id找到对应项，才能进行加加减减
- 修改个数时要注意，当数量为1时要禁用减号
- 全选反选：
- 当全部勾选时要自动勾选全选
- 当勾全选时，上面也要反选上
- 必须小选框都选中，全选按钮才选中，用
every- 全选框用
v-model="isAll"- 因为你也需要在点击全选框修改值，所以这个计算方法要用完整写法
- 要让所有小选框同步状态，所以用
for each- 统计的时候跟之前不同的是，这个只能统计你选中的，而不是直接全部统计
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<meta http-equiv="X-UA-Compatible" content="IE=edge" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<link rel="stylesheet" href="./css/inputnumber.css" />
<link rel="stylesheet" href="./css/index.css" />
<title>购物车</title>
</head>
<body>
<div class="app-container" id="app">
<!-- 顶部banner -->
<div class="banner-box"><img src="./img/fruit.jpg" alt="" /></div>
<!-- 面包屑 -->
<div class="breadcrumb">
<span>🏠</span>
/
<span>购物车</span>
</div>
<!-- 购物车主体 -->
<div class="main" v-if="fruitList.length>0">
<div class="table">
<!-- 头部 -->
<div class="thead">
<div class="tr">
<div class="th" >选中</div>
<div class="th th-pic">图片</div>
<div class="th">单价</div>
<div class="th num-th">个数</div>
<div class="th">小计</div>
<div class="th">操作</div>
</div>
</div>
<!-- 身体 -->
<div class="tbody" >
<div class="tr" :class="{active:item.isChecked}" v-for="(item,index) in fruitList" :key="item.id">
<div class="td"><input type="checkbox" v-model="item.isChecked" /></div>
<div class="td"><img :src="item.icon" alt="" /></div>
<div class="td">{{item.price}}</div>
<div class="td">
<div class="my-input-number">
<!-- 需要传id参数，不然不知道要加减的是哪一个 -->
<button :disabled="item.num<=1" class="decrease" @click="sub(item.id)"> - </button>
<span class="my-input__inner">{{item.num}}</span>
<button class="increase" @click="add(item.id)"> + </button>
</div>
</div>
<div class="td">{{item.num*item.price}}</div>
<div class="td"><button @click="del(item.id)">删除</button></div>
</div>
</div>
</div>
<!-- 底部 -->
<div class="bottom">
<!-- 全选 -->
<label class="check-all">
<input type="checkbox" v-model="isAll" />
全选
</label>
<div class="right-box">
<!-- 所有商品总价 -->
<span class="price-box">总价 : ¥ <span class="price">{{totalPrice}}</span></span>
<!-- 结算按钮 -->
<button class="pay">结算( {{ totalCount }})</button>
</div>
</div>
</div>
<!-- 空车 -->
<div class="empty" v-else>🛒空空如也</div>
</div>
<script src="../vue.js"></script>
<script>
const app = new Vue({
el: '#app',
data: {
// 水果列表
fruitList: [
{
id: 1,
icon: './img/火龙果.png',
isChecked: true,
num: 2,
price: 6,
},
{
id: 2,
icon: './img/荔枝.png',
isChecked: false,
num: 7,
price: 20,
},
{
id: 3,
icon: './img/榴莲.png',
isChecked: false,
num: 3,
price: 40,
},
{
id: 4,
icon: './img/鸭梨.png',
isChecked: true,
num: 10,
price: 3,
},
{
id: 5,
icon: './img/樱桃.png',
isChecked: false,
num: 20,
price: 34,
},
],
},
methods:{
del(id){
return this.fruitList=this.fruitList.filter(item=>item.id!==id)//两个等于号，记得是this打点，然后后面函数是item
},
add(id){
// 1.根据id找到数组中的对应项，才能知道是操作哪一个商品，用find
const fruit=this.fruitList.find(item=>item.id===id)
// 2.操作num数量
fruit.num++ //不是fruit++，而是fruit.num++
},
sub(id){
const fruit=this.fruitList.find(item=>item.id===id)
fruit.num--
}
},
computed:{
isAll:{
get(){
// 必须小选框都选中，全选按钮才选中，用every
return this.fruitList.every(item=>item.isChecked)
},
set(value){
//基于拿到的布尔值，要让所有小选框同步状态,注意，同步状态是在赋值，所以用等号
//所以用for each
this.fruitList.forEach(item =>item.isChecked = value);
}
},
//统计总数，用reduce
totalCount(){
return this.fruitList.reduce((sum,item)=>{
if(item.isChecked){
return sum + item.num
} else {
return sum
}
},0)
},
totalPrice(){
return this.fruitList.reduce((sum,item)=>{
if(item.isChecked){
return sum+item.price * item.num
}else{
return sum
}
},0)
}
}
})
</script>
</body>
</html>
