vue-11-购物车案例(2)-复习
【代码】vue-11-购物车案例(二)-复习。
·
接着前面的案例
<div id="box">
<ul>
<li>
<div>
<input type="checkbox" v-model="isAllChecked" @change="handleAllChange">
<span>全选/全不选</span>
</div>
</li>
<li v-for="(item,index ) in datalist" :key="item.id">
<div>
<input @change="handleItemChange" type="checkbox" v-model="checkList" :value="item">
</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--" :disabled="item.number===1">-</button>
{{item.number}}
<button @click="item.number++" :disabled="item.number===item.limit">+</button>
</div>
<div>
<button @click="handleDel(index,item.id)">删除</button>
</div>
</li>
<li>
<div>总金额:{{sum()}}</div>
</li>
</ul>
</div>
<script>
var obj = {
data() {
return {
// 勾选的商品列表
checkList: [],
isAllChecked: false,
datalist: [{
id: 1,
title: "商品1",
price: 10,
number: 1,
poster:
"https://p0.meituan.net/movie/dc2fed6001e809e4553f90cc6fad9a59245170.jpg@1l_1e_1c_128w_180h",
limit: 5,
},
// 省略...
]
}
},
methods: {
// 总金额
sum() {
return this.checkList.reduce((total, item) => total + item.price * item.number, 0)
},
// 删除按钮
handleDel(index, id) {
console.log(index);
this.datalist.splice(index, 1)
// 同步更新checkList
this.checkList = this.checkList.filter((item) => item.id !== id)
// 同步更新全选
this.handleItemChange()
},
// 是否全选
handleAllChange() {
// console.log(this.isAllChecked);
// 三目运算符
this.checkList = 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>
运行结果:
未完待续...
更多推荐
已为社区贡献1条内容
所有评论(0)