vue html项目,Html|Vue实战小项目-购物车

Title

全选商品名称商品单价购买数量金额(元)操作

{{ item.name }}

{{ item.price }}

-

{{ item.count }}

+

{{ ofPrice(index) }}

移除

总价: ￥ {{ totalPrices }}

购物车没有商品

var app = new Vue({

el: '#app',

data: {

list: [

{

id: 1,

name: '矿泉水',

price: 2,

count: 1,

check: true,

},

{

id: 2,

name: '口香糖',

price: 2.5,

count: 1,

check: false,

},

{

id: 3,

name: '可乐',

price: 3,

count: 1,

check: true,

},

]

},

methods: {

remove: function (index) {  //移除商品

this.list.splice(index, 1);

},

reduce: function (index) {  //减少商品

this.list[index].count --;

},

add: function (index) { //增加商品

this.list[index].count ++;

},

selAll: function () {   //商品全选

let isAll = document.querySelector('#all');

if (isAll.checked == true) {

this.list.forEach(function(item, index) {

item.check = true;

})

} else {

this.list.forEach(function(item, index) {

item.check = false;

})

}

},

ofPrice: function (index) { //计算单个商品总价

let ofPrice = 0;

ofPrice += (this.list[index].price * this.list[index].count);

return ofPrice.toString();

}

},

computed: {

totalPrices: function () {  //计算总价

let totalPrices = 0;

this.list.forEach(function (val, index) {

if (val.check == true)

totalPrices += parseFloat(val.price * val.count);

})

return totalPrices.toString();

},

}

})