java商品类别购物车类,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

for(var j = 0,goodsLen = this.lists[i].goods.length;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

for(var j = 0,goodsLen = this.lists[i].goods.length;j

this.lists[i].goods[j].num=0;

}

}

}

},

Settlement:function () {

if(this.alltotal[0]<=0){

console.log('我不动')

}else{

window.location.href = 'cashierPay.html'

}

}

}

})

html页面

扫码

• {{item.title}}

• {{item.name}}

  ￥{{item.price}}

  

  {{item.num}}

  

共{{alltotal[1]}}件商品

￥{{alltotal[0]}}

结算

已选商品

清空

• {{item.name}}
  ￥{{item.price}}

  

  {{item.num}}

  

以上就是本文的全部内容，希望对大家的学习有所帮助，也希望大家多多支持脚本之家。