购物车的案例之前在慕课网友看过视频，奈何不给css样式，加上自己当时没有耐心，咸鱼得一批，迟迟没有动手写。
今天在网上看见别人的文章里有这个案例，写得特别详细，跟着他一步步做下来，感觉收获挺多的。
先感谢一下原作者，写得是真的好。https://segmentfault.com/a/1190000010801357#articleHeader11
这里面还有其他案例，明天继续学学。以后留着看看也是很好的一个选择。
好了，来贴一下，今天辛辛苦苦肝出来的实例吧。还是很有成就感的。比较偷懒用了bootstrap的框架，选择按钮其实是图片的切换。
该购物车的主要功能有，增加购买数量，金额实时变化。选择了要购买的商品后，总金额实时变化。全选和取消全选。删除单个和删除选中商品。
效果图如下
html
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Document</title>
<script src="../js/jquery-3.2.1.js"></script>
<link rel="stylesheet" type="text/css" href="../css/bootstrap.min.css">
<script src="../js/bootstrap.js"></script>
</head>
<style type="text/css">
.left{
display: block;
float: left;
width: 80px;
height: 100px;
}
.right{
display: block;
margin-left: 90px;
height: 100px;
}
.number{
width: 40px;
}
</style>
<body class="container" >
<p>购物清单</p>
<div id="app">
<table class="table" >
<tr>
<td>
<span v-if="isSelectAll==false" @click="selectAll(),select=!select"><img src="../image/no.png">全选</span>
<span v-else="isSelectAll==true" @click="selectNone(),select=!select"><img src="../image/yes.png">全选</span>
</td>
<td>商品</td>
<td>数量</td>
<td>单价(元)</td>
<td>金额(元)</td>
<td>操作</td>
</tr>
<tr v-for="goods in goodsList">
<td>
<span v-if="goods.select==false" @click="goods.select=!goods.select"><img src="../image/no.png"></span>
<span v-else="gooods.select==true" @click="goods.select=!goods.select"><img src="../image/yes.png"></span>
</td>
<td>
<div class="left"><img src="../image/3.jpeg" style="width: 100;height: 100%;"></div>
<div class="right">
<h5>{{goods.name}}</h5>
<p>品牌：{{goods.brand}} 产地:{{goods.location}}</p>
<p>规格/纯度:{{goods.size}} 起定量:{{goods.number}}</p>
<p>配送仓储:{{goods.send}}</p>
</div>
</td>
<td>
<a class="btn" @click="goods.num--">-</a>
<input type="text" class="number" v-model="goods.num" style="text-align: center;"></input>
<a class="btn" @click="goods.num++">+</a>
</td>
<td>${{goods.price}}</td>
<td>${{goods.num*goods.price}}</td>
<td><a class="btn btn-danger" @click="deleteOne(index)">删除</a></td>
</tr>
</table>
<p style="float: left;"><a class="btn" @click="deleteGoods()">删除选中商品</a></p>
<p style="float: right;">您挑选了{{getTotal.totalNum}}商品，共计{{getTotal.totalPrice}}元</p>
</div>
<script src="../js/vue.js"></script>
<script src="../mainJS/goodsList.js"></script>
</body>
</html>js
var app = new Vue({
el: '#app',
data:{
select:false,
goodsList:[
{
name:'可乐',
brand:'可口可乐公司',
location:'海外',
size:'300ml',
number:10,
send:'海外仓库',
price:3,
num:2,
},
{
name:'雪碧',
brand:'可口可乐公司',
location:'海外',
size:'270ml',
number:10,
send:'海外仓库',
price:3,
num:1,
},
{
name:'芬达',
brand:'可口可乐公司',
location:'海外',
size:'300ml',
number:20,
send:'海外仓库',
price:4,
num:4,
},
{
name:'美年达',
brand:'可口可乐公司',
location:'海外',
size:'300ml',
number:16,
send:'海外仓库',
price:2,
num:3,
},
]
},
methods:{
selectAll:function(){
for(var i=0;i<this.goodsList.length;i++){
this.goodsList[i].select=true;
}
},
selectNone:function(){
for(var i=0;i<this.goodsList.length;i++){
this.goodsList[i].select=false;
}
},
deleteOne:function(index){
//选中之后删除
//this.goodsList=this.goodsList.filter(function (item) {return !item.select});
//点击删除按钮后直接删除
this.goodsList.splice(index,1);
},
deleteGoods:function(){
this.goodsList=this.goodsList.filter(function (item) {return !item.select});
},
},
computed: {
isSelectAll:function(){
//如果每一条数据的select都为true，返回true，否则返回false;
return this.goodsList.every(function (val) { return val.select});
},
getTotal:function(){
//获取goodsList中select为true的数据。
var _proList=this.goodsList.filter(function (val) { return val.select}),totalPrice=0;
for(var i=0,len=_proList.length;i<len;i++){
//总价累加
totalPrice+=_proList[i].num*_proList[i].price;
}
//选择产品的件数就是_proList.length，总价就是totalPrice
return {totalNum:_proList.length,totalPrice:totalPrice}
},
},
mounted:function () {
var _this=this;
this.goodsList.map(function (goods) {
_this.$set(goods, 'select', false);
})
},
})