Vue 购物车案例
Vue 购物车案例
该购物车主要实现了全选、数量加减、自动计算总金额、删除等功能
代码如下
html部分
<!-- view -->
<div id="app">
<h3>购物车</h3>
<div class="box" v-for="(item,index) in list" v-if="item.list.length>0">
<h4 class="shop-title">
<input type="checkbox" @click="dealSelectShop(index)" :checked="item.isSelect">
{{item.title}}
</h4>
<ul>
<li>
<span class="goods-check">选择</span>
<span class="goods-title">商品名</span>
<span class="goods-num">数量</span>
<span class="goods-price">单价</span>
<span class="goods-button">
操作
</span>
</li>
<li v-for="(subitem,subindex) in item.list" class="goods">
<input type="checkbox" @click="dealSelectGoods(index,subindex)" :checked="subitem.isSelect" class="goods-check">
<span class="goods-title">{{subitem.title}}</span>
<span class="goods-num">
<button @click="dealSub(index,subindex)">-</button>
{{subitem.num}}
<button @click="dealAdd(index,subindex)">+</button>
</span>
<span class="goods-price">{{subitem.price}}元</span>
<span class="goods-button">
<button @click="dealDelete(index,subindex)">删除</button>
</span>
</li>
</ul>
</div>
<div>
<div>全选<input type="checkbox" @click="dealSelectAll" :checked="isSelectAll"></div>
<div>您已经选择了<span class="allNum">{{allNum}}</span>种商品</div>
<div>总价为 <span class="allPrice">{{allPrice}}</span>元</div>
<div>
<button>去结算</button>
</div>
</div>
</div>
css部分
body,ul,li{
margin:0;
list-style: none;
}
li{
width: 100%;
}
span{
display: inline-block;
}
.goods-check{
width: 5%;
}
.goods-title{
width: 30%;
}
.goods-num{
width: 20%;
}
.goods-price{
width: 15%;
}
.goods-button{
width: 15%;
}
.allNum,.allPrice{
font-size: 30px;
color: #f90;
}
.shop-title{
background: #eaeaea;
line-height: 40px;
padding-left:10px;
}
.goods{
background: #eaeaea;
line-height: 30px;
margin:5px 0;
}
js部分
<script src="js/vue/vue.js" type="text/javascript" charset="utf-8"></script>
<script type="text/javascript">
//model
var data = {
isSelectAll:false,
list:[
{
title:"天猫超市",
isSelect:false,
list:[
{
id:1001,
title:"小当家干吃面",
num:1,
price:39,
isSelect:false
},{
id:1002,
title:"夹心饼干",
num:2,
price:55,
isSelect:false
}
]
},{
title:"球球旗舰店",
isSelect:false,
list:[
{
id:2001,
title:"球球外套",
num:1,
price:88,
isSelect:false
},{
id:2002,
title:"球球球鞋",
num:5,
price:199,
isSelect:false
}
]
}
]
}
//viewModel
var app = new Vue({
el:"#app",
data:data,
computed:{
allNum(){
var allNum = 0;
for(shop of this.list){
for(goods of shop.list){
if(goods.isSelect){
allNum+=1
}
}
}
return allNum
},
allPrice(){
var allPrice = 0;
for(shop of this.list){
for(goods of shop.list){
if(goods.isSelect){
allPrice+=goods.num*goods.price
}
}
}
return allPrice
}
},
methods:{
dealSub(index,subindex){
var shop = this.list[index]
var goods = shop.list[subindex]
if(goods.num-1>0){
goods.num--
}
},
dealAdd(index,subindex){
var shop = this.list[index]
var goods = shop.list[subindex]
goods.num++
},
dealDelete(index,subindex){
var shop = this.list[index]
shop.list.splice(subindex,1)
},
dealSelectGoods(index,subindex){
var shop = this.list[index]
var goods = shop.list[subindex]
goods.isSelect =!goods.isSelect;
//判断所有商品是否被选中
var isSelectAllGoods = true;
for(goods of shop.list){
if(goods.isSelect==false){
isSelectAllGoods=false
}
}
if(isSelectAllGoods){
shop.isSelect=true
}else{
shop.isSelect=false
}
//判断所有商铺是否被选中
var isSelectAllShop = true;
for(shop of this.list){
if(shop.isSelect==false){
isSelectAllShop=false
}
}
if(isSelectAllShop){
this.isSelectAll=true
}else{
this.isSelectAll=false
}
},
dealSelectShop(index){
var shop = this.list[index]
shop.isSelect=!shop.isSelect
for(goods of shop.list){
goods.isSelect = shop.isSelect
}
//判断所有商铺是否被选中
var isSelectAllShop = true;
for(shop of this.list){
if(shop.isSelect==false){
isSelectAllShop=false
}
}
if(isSelectAllShop){
this.isSelectAll=true
}else{
this.isSelectAll=false
}
},
dealSelectAll(){
this.isSelectAll=!this.isSelectAll;
for(shop of this.list){
shop.isSelect = this.isSelectAll
for(goods of shop.list){
goods.isSelect = this.isSelectAll
}
}
}
}
})
</script>