Vue2.x实现商城购物车

1.实现购物车页面

在页面中显示购物车中的商品信息，并能进行数量增减及商品删除操作，购物车中金额也随商品数量的变化而变化
在这里插入图片描述

2.创建cart.html页面

创建cart.html页面，在其中创建Vue实例，实例中首先准备一些商品信息以供显示，在组件实例data选项中编写商品信息

<!DOCTYPE html>
<html><head><meta charset="utf-8"><title>购物车</title><script src="js/vue2.js"></script></head><body>	<div id="app"></div><script>var app = new Vue({el:"#app",data:{shangpins:[{id:1,name:"万岁山",danjia:80,num:3},{id:2,name:"清明上河园",danjia:120,num:5},{id:3,name:"龙庭公园",danjia:40,num:5}]}})</script></body>
</html>

3.计算单项价格

为了使单项商品金额随购物车中商品数量动态变化，需要在Vue实例中编写方法shangpinJiage()来进行计算，并在方法中编写deleteShangpin()用以删除购物车中的商品。购物车中商品总价的统计使用计算属性来实现。在cart.html的Vue实例中添加以下代码。

				methods:{//单项商品价格shangpinJiage(danjia,num){return danjia * num;},deleteShangpin(index){this.shangpins.splice(index,1);}},computed:{zongJia(){var zongjia = 0;this.shangpins.forEach(function(sp,index,arr){zongjia += sp.danjia * sp.num;})}}

4.在div容器中遍历展示

在id = app的div中使用v-for标签遍历输出商品信息，单项书籍价格使用shangpinJiage()方法进行更新，总价计算使用计算属性zongJia()进行更新，删除功能使用v-on指令通过监听按钮点击deleteShangpin()方法实现，在cart.html的vue实例中添加如下代码

<div id="app"><table border="1"><tr><th>序号</th><th>商品名称</th><th>单价</th><th>数量</th><th>金额</th><th>操作</th></tr><tr v-for="(shangpin,index) in shangpins" :key="shangpin.id"><td>{{shangpin.id}}</td><td>{{shangpin.name}}</td><td>{{shangpin.danjia}}</td><td><button v-bind:disabled="shangpin.num === 0"v-on:click="shangpin.num-=1">-</button>{{shangpin.num}}<button v-on:click="shangpin.num+=1">+</button></td><td>{{shangpinJiage(shangpin.danjia,shangpin.num)}}</td><td><button @click="deleteShangpin(index)">删除</button></td></tr></table><span>总价：￥{{zongJia()}}</span></div>

5.在页面中添加style样式

<style>body{width: 600px;}table{border:1px solid black;}table{width: 100%;}th{height: 50px;}th,td{border-bottom: 1px solid #ddd;text-align: center;}span{float:right}</style>