vue实现购物车功能（商品分类）

本文实例为大家分享了vue实现购物车功能的具体代码，供大家参考，具体内容如下

new Vue({
el: "#app",
data: {
cIndex: 0,
lists: [
 {
 title: "推荐商品",
 goods: [
  {
  id: 0,
  img: './images/goods.png',
  name: '散称樱桃1',
  price: '10.00',
  num: 0
  },
  {
  id: 1,
  img: './images/goods.png',
  name: '散称樱桃1',
  price: '10.00',
  num: 0
  }

]
 },
 {
 title: "推荐商品",
 goods: [
  {
  id: 2,
  img: './images/goods.png',
  name: '散称樱桃2',
  price: '20.00',
  num: 0
  },
  {
  id: 3,
  img: './images/goods.png',
  name: '散称樱桃2',
  price: '20.00',
  num: 0
  },
 ]
 },
],
carArr: [],
appearCar: false,
},
computed:{
alltotal:function () {
 var alltotal = 0;
 var allNum = 0;
 for(var i = 0,len = this.lists.length;i<len;i++){
 for(var j = 0,goodsLen = this.lists[i].goods.length;j<goodsLen;j++){
  alltotal += parseInt(this.lists[i].goods[j].num)*parseFloat(this.lists[i].goods[j].price);
  allNum += parseInt(this.lists[i].goods[j].num);
 }
 }
 return [alltotal,allNum]
},
},
methods: {
leftTap: function (index) {
 this.cIndex = index
},
showCar: function () {
 if (this.carArr.length == 0) {
 this.appearCar = false
 } else {
 this.appearCar = !this.appearCar
 }

},
//商品数量加
addNum: function (data) {
 data.num++;
 var carArr = this.carArr;
 var isCar = false;
 if (carArr == 0) {
 carArr.push(data)
 }
 for (var i = 0, len = carArr.length; i < len; i++) {
 if (data.id == carArr[i].id) {
  isCar = true
 }
 }
 if (!isCar) {
 carArr.push(data)
 }
},
reduceNum: function (data) {
 if (data.num <= 0) return;
 var carArr = this.carArr;
 data.num--;
 var isCar = false;
 for (var i = 0, len = carArr.length; i < len; i++) {
 if (carArr[i].num <= 0) {
  carArr.splice(i, 1)
 }
 }
},
carAddNum: function (index) {
 this.carArr[index].num++
},
carReduceNum: function (index) {
 this.carArr[index].num--;
 if (this.carArr[index].num <= 0) {
 this.carArr.splice(index, 1)
 }
 if (this.carArr.length == 0) {
 this.appearCar = !this.appearCar
 }
},
// 清空
delCar: function () {
 confirm('确定清空购物车吗?');
 var cur = this.cIndex;
 var goods = this.lists[cur].goods
 if (true) {
 this.carArr = [];
 this.appearCar = !this.appearCar;
 for(var i = 0,len = this.lists.length;i<len;i++){
  for(var j = 0,goodsLen = this.lists[i].goods.length;j<goodsLen;j++){
  this.lists[i].goods[j].num=0;
  }
 }
 }
},
Settlement:function () {
 if(this.alltotal[0]<=0){
 console.log('我不动')
 }else{
 window.location.href = 'cashierPay.html'
 }
}
}
})

html页面

<div id="app" v-cloak>
<div class='box'>
<div class='boxleft'>
 <div class='boxla'>
 <img src='./images/sm.png'/>
 <span>扫码</span>
 </div>
 <ul class='boxlbox'>
 <template v-for="(item,index) in lists">
  <li @click='leftTap(index)' :class="{boxlb_cheak:cIndex==index}" class='boxlb'>
  <span class='boxlb_inner' :class="{boxlb_inner_cheak:cIndex==index}">{{item.title}}</span>
  </li>
 </template>
 </ul>
</div>
<ul class='boxright'>
 <li class='boxri' v-for="(item,index) in lists[cIndex].goods">
 <img class='boxri_img' :src='item.img'/>
 <div class='boxri_text'>
  <div class='boxrit_left'>
  <p class='boxritl_name'>{{item.name}}</p>
  <p class='boxritl_price'>￥{{item.price}}</p>
  </div>
  <div class='boxrit_right'>
  <img @click='reduceNum(item)' v-show="item.num>0" class='boxrit_right_img' src='./images/minus.png'/>
  <span class='boxrit_right_num' v-show="item.num>0">{{item.num}}</span>
  <img @click='addNum(item)' class='boxrit_right_img' src='./images/add.png'/>
  </div>
 </div>
 </li>
</ul>
</div>
<footer class='footer'>
<div class='cartImgBox'>
 <img class='cartImg' src='./images/car.png' @click='showCar'/>
 共{{alltotal[1]}}件商品
</div>
<div class='footerb'>￥{{alltotal[0]}}</div>
<div @click='Settlement' class='footerc'>结算</div>
</footer>
<!-- 购物车 -->

<div class='shop-car-mask' v-show="appearCar">
<div class='shop-com'>
 <div class='shop-title'>
 <span>已选商品</span>
 <span @click="delCar">清空</span>
 </div>
 <ul class="car-shopList">
 <template v-for='(item,index) in carArr'>
  <li class='car-list'>
  <div class='car-img'>
   <img :src='item.img'/>
  </div>
  <div class='car-name'>{{item.name}}</div>
  <div class='car-num'>￥{{item.price}}</div>
  <div class='boxrit_right2'>
   <img @click='carReduceNum(index)' class='boxrit_right_img2' src='./images/minus.png'/>
   <span class='boxrit_right_num2'>{{item.num}}</span>
   <img @click='carAddNum(index)' class='boxrit_right_img2' src='./images/add.png'/>
  </div>
  </li>
 </template>
 </ul>
</div>
</div>
</div>

来源：https://blog.csdn.net/qq_39019768/article/details/83094875