小知识，大挑战！本文正在参与“程序员必备小知识”创作活动
一、前言
“购物车”一词想必大家都不会陌生吧，在互联网时代，足不出户了解天下新闻大事，同样足不出户实现买买买，坐等上门取货。今天我们的主题就是——购物车，技术方面的话用的是现如今火爆的Vue框架来实现简单的购物车操作
二、实现原理分析
购物车逻辑:商品的加加减减、价格的计算、选中全选与反选、以及删除操作，这些的逻辑思维
三、实现展示效果
四、逻辑代码分析
1、页面的基本布局
<div id="app" v-cloak>
<template v-if="list.length">
<table class="cartTable">
<tr>
<th>全选<input type="checkbox" @click="check_all()" v-model="CheckedAll" /></th>
<th></th>
<th>商品名称</th>
<th>商品单价</th>
<th>购买数量</th>
<th>总金额</th>
<th>操作</th>
</tr>
<tbody>
<tr v-for="(item , index) in list">
<td><input type="checkbox" v-model="item.checked"></td>
<td>{{ index+1 }}</td>
<td>{{ item.name }}</td>
<td>{{ item.price }}</td>
<td><button @click="handleReduce(index)" :disabled="item.count == 1">-</button>{{item.count}}<button
@click="handleAdd(index)">+</button></td>
<td>{{ item.stotal }}</td>
<td><button @click="handleRemove(index)">删除</button></td>
</tr>
</tbody>
</table>
<div class="total">总价：¥{{ totalprice }}</div>
</template>
<div v-else>购物车为空</div>
</div>
2、购物车数据的添加
data: {
CheckedAll: false,
list: [
{
checked: false,
id: 1,
name: 'iphone7',
price: 6188,
count: 1,
stotal: 6188
},
{
checked: false,
id: 2,
name: 'iphone8',
price: 7188,
count: 1,
stotal: 7188
},
{
checked: false,
id: 3,
name: 'iphone9',
price: 8188,
count: 1,
stotal: 8188
}
]
},
// 这里是循环3条购物车订单，具体结合实际跳转接口为准
computed: {
totalprice: function () {
var total = 0;
for (var i = 0; i < this.list.length; i++) {
var item = this.list[i];
if (item.checked) {
total += item.price * item.count;
}
}
return total.toString().replace(/\B(?=(\d{3})+$)/g, ',')
}
},
3、商品价格的相加
// 价格相加
handleAdd: function (index) {
this.list[index].count++;
this.list[index].stotal = this.list[index].count*this.list[index].price;
},
4、商品价格未选择减去
// 价格想相减
handleReduce: function (index) {
if (this.list[index].count === 1) return;
this.list[index].count--;
this.list[index].stotal = this.list[index].count*this.list[index].price;
},
5、删除订单
// 数组splice删除下标
handleRemove: function (index) {
this.list.splice(index, 1)
},
6、全选与反选
// 全选与全不选
check_all: function(){
if(this.CheckedAll == false){
this.list.forEach(item1 => {
item1.checked = true;
});
}else{
this.list.forEach(item1 => {
item1.checked = false;
});
}
this.CheckedAll = !this.CheckedAll;
}
以上是介绍的细化步骤 下面是完整的代码
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>Document</title>
<style>
[v-cloak] {
display: none;
}
table{border-collapse:collapse;border-spacing:0;}
.cartTable{width:100%;}
.cartTable th{padding:10px 0;background-color:khaki;}
.cartTable td{padding:10px 0;text-align: center;border-bottom:1px #dedede solid;}
.cartTable td button{margin:0 10px;}
.total{padding:10px 0;}
</style>
</head>
<body>
<div id="app" v-cloak>
<template v-if="list.length">
<table class="cartTable">
<tr>
<th>全选<input type="checkbox" @click="check_all()" v-model="CheckedAll" /></th>
<th></th>
<th>商品名称</th>
<th>商品单价</th>
<th>购买数量</th>
<th>总金额</th>
<th>操作</th>
</tr>
<tbody>
<tr v-for="(item , index) in list">
<td><input type="checkbox" v-model="item.checked"></td>
<td>{{ index+1 }}</td>
<td>{{ item.name }}</td>
<td>{{ item.price }}</td>
<td><button @click="handleReduce(index)" :disabled="item.count == 1">-</button>{{item.count}}<button
@click="handleAdd(index)">+</button></td>
<td>{{ item.stotal }}</td>
<td><button @click="handleRemove(index)">删除</button></td>
</tr>
</tbody>
</table>
<div class="total">总价：¥{{ totalprice }}</div>
</template>
<div v-else>购物车为空</div>
</div>
<script src="https://cdn.jsdelivr.net/npm/vue@2.5.17/dist/vue.js"></script>
<script type="text/javascript">
var app = new Vue({
el: '#app',
data: {
CheckedAll: false,
list: [
{
checked: false,
id: 1,
name: 'iphone7',
price: 6188,
count: 1,
stotal: 6188
},
{
checked: false,
id: 2,
name: 'iphone8',
price: 7188,
count: 1,
stotal: 7188
},
{
checked: false,
id: 3,
name: 'iphone9',
price: 8188,
count: 1,
stotal: 8188
}
]
},
// 这里是循环3条购物车订单，具体结合实际跳转接口为准
computed: {
totalprice: function () {
var total = 0;
for (var i = 0; i < this.list.length; i++) {
var item = this.list[i];
if (item.checked) {
total += item.price * item.count;
}
}
return total.toString().replace(/\B(?=(\d{3})+$)/g, ',')
}
},
methods: {
// 价格想相减
handleReduce: function (index) {
if (this.list[index].count === 1) return;
this.list[index].count--;
this.list[index].stotal = this.list[index].count*this.list[index].price;
},
// 价格相加
handleAdd: function (index) {
this.list[index].count++;
this.list[index].stotal = this.list[index].count*this.list[index].price;
},
// 数组splice删除下标
handleRemove: function (index) {
this.list.splice(index, 1)
},
// 全选与全不选
check_all: function(){
if(this.CheckedAll == false){
this.list.forEach(item1 => {
item1.checked = true;
});
}else{
this.list.forEach(item1 => {
item1.checked = false;
});
}
this.CheckedAll = !this.CheckedAll;
}
}
})
</script>
</body>
</html>
五、总结分析
1、综合以上就是实现购物车的所有技术分析
2、万变不离其宗再怎么变的就是前端样式结构的调整，购物车的基本逻辑思维是不会变的
3、原创不易，欢迎点赞关注和转发评论✊✊✊
