心语：世间本无沙漠，我每想你一次，上帝就落下一粒沙，从此便有了撒哈拉。
对于购物车这个需求，很多无论pc端还是移动端的电商项目中都会碰到，所以这篇文章我做了一个书籍购物车的小案例。
主要实现业务需求：
- 书籍的数量增加
- 书籍数量的减少
- 书籍总价格的计算
接下来，让我们进入真正的代码实现过程吧，首先先实现静态页面的布局，这里为了简单简便，我使用了表格来布局页面。
<divid="app"><divv-if="books.length"class="container"><table><thead><tr><th></th><th>书籍名称</th><th>出版日期</th><th>价格</th><th>购买数量</th><th>操作</th></tr></thead><tbody><trv-for="(item,index) in books":key="index"><td>{{item.id}}</td><td>{{item.name}}</td><td>{{item.date}}</td><td>{{item.price | showPrice}}</td><td><button@click="increment(index)":disabled="item.count<=1">-</button>
{{item.count}}<button@click="decrement(index)">+</button></td><td><button@click="del(index)">移除</button></td></tr></tbody></table><h2>总价格:{{totalPrice | showPrice}}</h2></div><h2v-else>购物车为空</h2></div>CSS
.container{width: 630px;overflow: hidden;background-color: #ddd;}table{width: 100%;border-collapse: collapse;border-spacing: 0;}th,td{padding: 8px 16px;text-align: center;}th{background-color: skyblue;color: #ddd;font-weight: 700;}静态页面布局完成之后，在写功能业务之前应该思考都应该实现什么功能呢？
只要有了思路，才能下手更顺畅。
- 点击减少按钮实现count的减少
为了增强业务逻辑以及用户体验，这里我做了数量的临界值处理，当数量为1时，禁用按钮的点击。
:disabled="item.count<=1"increment(index){this.books[index].count--;},- 点击增加按钮来实现count的增加
decrement(index){this.books[index].count++;},- 点击移除按钮会将该项书籍列表删除
这里使用的是通过书籍的数组索引index来删除该列表，一般真正的项目不会使用数据的索引作为删除的标识，从服务器获取到的书籍数据中一般会有对应的书籍ID。
del(index){this.books.splice(index,1);}- 格式化处理总价格
这里使用了局部过滤器来实现对于价格保留了小数点两位数
filters:{showPrice(price){return'￥'+ price.toFixed(2)}},- 计算添加购物车书籍的总价格
computed:{totalPrice(){// let totalPrice = 0;//1. 普通遍历数组,增加价格// this.books.forEach(item => {// totalPrice += item.price * item.count;// })// 2.es6新语法// for (let i in this.books) {// console.log(this.books[i]); //item// totalPrice += this.books[i].price * this.books[i].count;// }// 3.for...of// for (let item of this.books) {// console.log(item);// totalPrice += item.price * item.count;// }// return totalPrice// 4.reduce高阶函数returnthis.books.reduce((preValue, book)=>{return preValue+ book.price* book.count;},0)}上面使用了四种方法来计算总价格，我还是推荐多实用高阶函数，我这里使用到了reduce，reduce是专门用来统计数据的。很好用
至此，一个简易版的购物车就实现完成了，让我们看看效果吧。
全部代码如下：
<!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"><title>购物车</title><link rel="stylesheet" href="index.css"><script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script></head><body><div id="app"><div v-if="books.length"class="container"><table><thead><tr><th>序号</th><th>书籍名称</th><th>出版日期</th><th>价格</th><th>购买数量</th><th>操作</th></tr></thead><tbody><tr v-for="(item,index) in books"><td>{{item.id}}</td><td>{{item.name}}</td><td>{{item.date}}</td><td>{{item.price| showPrice}}</td><td><button @click="increment(index)":disabled="item.count<=1">-</button>{{item.count}}<button @click="decrement(index)">+</button></td><td><button @click="del(index)">移除</button></td></tr></tbody></table><h2>总价格:{{totalPrice| showPrice}}</h2></div><h2 v-else>购物车为空</h2></div>newVue({
el:"#app",
data:{
books:[{
id:1,
name:"算法导论",
date:"2021-7",
price:58,
count:1},{
id:2,
name:"Javascript忍者秘籍",
date:"2021-6",
price:88,
count:1},{
id:3,
name:"编程艺术",
date:"2021-4",
price:112,
count:1},{
id:4,
name:"UNIX编程艺术",
date:"2021-7",
price:98,
count:1},{
id:5,
name:"HTTP协议详解",
date:"2021-7",
price:38,
count:1},]},
methods:{decrement(index){this.books[index].count++;},increment(index){this.books[index].count--;},del(index){this.books.splice(index,1);}},
filters:{showPrice(price){return'￥'+ price.toFixed(2)}},
computed:{totalPrice(){// let totalPrice = 0;//1. 普通遍历数组,增加价格// this.books.forEach(item => {// totalPrice += item.price * item.count;// })// 2.es6新语法// for (let i in this.books) {// console.log(this.books[i]); //item// totalPrice += this.books[i].price * this.books[i].count;// }// 3.for...of// for (let item of this.books) {// console.log(item);// totalPrice += item.price * item.count;// }// return totalPrice// 4.reduce高阶函数returnthis.books.reduce((preValue, book)=>{return preValue+ book.price* book.count;},0)}}})</body></html>