购物车案列
购物车案列
--vue-day04
1. 选中checkbox,就赋值给标签
先定义一个空数组(checkGroup:[],),再绑定
<td><input type="checkbox" v-model="checkGroup" :value="item" ></td>
2. 定义一个标签显示选中的价格总和
通过插值语法调用函数计算总和
<p>总价格:{{getPrice()}}</p>
<script>
var vm = new Vue({
el:'.shop',
data:{ },
methods:{
getPrice(){
// 通过checkGroup里面的对象,计算出总价格
var total=0
for(i of this.checkGroup){
total += i.number * i.price
}
return total
}
}
})
</script>
3. 全选和全不选-----逻辑
给全选/全不选设置一个双向数据绑定绑定,优先设置默认值为0,然后给标签绑定一个点击change事件,如果全选就checkGroup等于原来的商品列表,否就置为空
<th>全选/全不选 <input type="checkbox" v-model="checkAll" @change="handleCheckAll"> </th>
//单选
<td><input type="checkbox" v-model="checkGroup" :value="item" @change="handleClickOne" ></td>
methods:{
getPrice(){ },
// 全选的逻辑
handleCheckAll(){
if (this.checkAll){
this.checkGroup = this.skirt_list // 全选
}else {
this.checkGroup=[] //全不选
}} } ,
handleClickOne(){
console.log(this.checkAll)
// 单个商品被选了
if(this.checkGroup.length==this.skirt_list.length){
this.checkAll=true // 当单选等于全选时,就选中全选
}else{
this.checkAll=false
}
}
4. 商品可以增加或减少的逻辑
1.设置可以增减的按钮,增减可以通过++或--实现,但是会一直减值到负数,通过点击事件来控制当商品数量减到1就不能再减少
<td>
<button class="left" @click="handleDown(item)">-</button>
{{item.number}}
<button class="right" @click="item.number++">+</button>
</td>
handleDown(item){
if(item.number>1){
item.number--
}else{
alert('商品数量为1,不能再减了')
}
},
5. 商品删除
当商品减少小于1,开始删除商品信息并更新临时checkGroup以及价格的变化。也可以选中直接删除整个商品信息(给删除按钮绑定了点击事件)
// 删除的逻辑
clickDelBtn(item){
// Skirt_list删除商品
this.Skirt_list.splice(this.Skirt_list.indexOf(item),1)
// 临时checkGroup数组的变化
if(this.checkGroup.indexOf(item)>0){
this.checkGroup.splice(this.checkGroup.indexOf(item),1)
}
},
代码展示
购物车动态展示
点击查看代码
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<script src="vue.js"></script>
<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/3.4.1/css/bootstrap.min.css"
integrity="sha384-HSMxcRTRxnN+Bdg0JdbxYKrThecOKuH5zCYotlSAcp1+c8xmyTe9GYg1l9a69psu" crossorigin="anonymous">
</head>
<body>
<div class="shop">
<div class="container-fluid">
<div class="row">
<div class="col-md-6 col-md-offset-3">
<h1 class="text-center">{{username}}购物车</h1>
<div>
<table class="table table-hover">
<thead>
<tr>
<th>id</th>
<th>商品名</th>
<th>商品价格</th>
<th>商品数量</th>
<th>全选/全不选 <input type="checkbox" v-model="checkAll" @change="handleCheckAll"></th>
<th>delete</th>
</tr>
</thead>
<tbody>
<!-- <tr v-for="(item,key) in Skirt_list" :key="key">-->
<tr v-for="(item) in Skirt_list">
<th scope="row">{{item.id}}</th>
<td>{{item.name}}</td>
<td>{{item.price}}</td>
<td>
<button @click="handleDown(item)">-</button>
{{item.number}}
<button @click="handleU(item)" >+</button>
</td>
<td><input type="checkbox" v-model="checkGroup" :value="item" @change="handleClickOne"></td>
<td><button value="" class="btn btn-danger" @click="clickDelBtn(item)" >删除</button></td>
</tr>
</tbody>
</table>
<p>shopping_show: {{checkGroup}}</p>
<p>总价格:{{getPrice}}</p>
</div>
</div>
</div>
</div>
</div>
</div>
</body>
<script>
var vm = new Vue({
el:'.shop',
data: {
username: 'kiki',
Skirt_list: [
{id: 1, name: '连衣裙', price: 299, number: 2,stock:4},
{id: 2, name: '法式长裙', price: 399, number: 4,stock:6},
{id: 3, name: '泡泡袖裙', price: 269, number: 1,stock:1},
{id: 4, name: '公主裙', price: 400, number: 3,stock:4},
{id: 5, name: '唐制诃子裙', price: 699, number: 2,stock:3},
{id: 6, name: '小鹿斑比', price: 899, number: 1,stock:5},
{id: 7, name: '玉露酥山', price: 656, number: 2,stock:2},
],
checkGroup: [],
checkAll: false,//全选或全不选
},
methods: {
// 计算库存数
handleU(item){
//选中商品数量小于库存数
if(item.number<item.stock){
item.number++
}else{
alert('库存数只有:'+ item.stock)
}
},
// 全选的逻辑
handleCheckAll() {
if (this.checkAll) {
this.checkGroup = this.Skirt_list
} else {
this.checkGroup = []
}
},
handleClickOne() {
// 单个商品被选了
if (this.checkGroup.length === this.Skirt_list.length) {
this.checkAll = true
} else {
this.checkAll = false
}
},
handleDown(item){
if(item.number>1){
item.number--
}else{
// 当商品减少为0开始删除商品信息
alert('确定要删除商品')
// Skirt_list删除商品
this.Skirt_list.splice(this.Skirt_list.indexOf(item),1)
// 临时checkGroup数组的变化
if(this.checkGroup.indexOf(item)>0){
this.checkGroup.splice(this.checkGroup.indexOf(item),1)
}
}
},
// 删除的逻辑
clickDelBtn(item){
// Skirt_list删除商品
this.Skirt_list.splice(this.Skirt_list.indexOf(item),1)
// 临时checkGroup数组的变化
if(this.checkGroup.indexOf(item)>0){
this.checkGroup.splice(this.checkGroup.indexOf(item),1)
}
},
},
//计算属性
computed:{
getPrice() {
// 通过checkGroup里面的对象,计算出总价格
var total = 0
for (i of this.checkGroup) {
total += i.number * i.price
}
return total
},
},
})
</script>
</html>
【推荐】编程新体验,更懂你的AI,立即体验豆包MarsCode编程助手
【推荐】凌霞软件回馈社区,博客园 & 1Panel & Halo 联合会员上线
【推荐】抖音旗下AI助手豆包,你的智能百科全书,全免费不限次数
【推荐】博客园社区专享云产品让利特惠,阿里云新客6.5折上折
【推荐】轻量又高性能的 SSH 工具 IShell:AI 加持,快人一步
· 【.NET】调用本地 Deepseek 模型
· CSnakes vs Python.NET:高效嵌入与灵活互通的跨语言方案对比
· 我与微信审核的“相爱相杀”看个人小程序副业
· DeepSeek “源神”启动!「GitHub 热点速览」
· Plotly.NET 一个为 .NET 打造的强大开源交互式图表库