大橙子网站建设,新征程启航

为企业提供网站建设、域名注册、服务器等服务

Vue实现购物车场景下的应用

本文实例为大家分享了Vue在购物车场景下的应用,供大家参考,具体内容如下

通河网站制作公司哪家好,找创新互联公司!从网页设计、网站建设、微信开发、APP开发、成都响应式网站建设等网站项目制作,到程序开发,运营维护。创新互联公司2013年至今到现在10年的时间,我们拥有了丰富的建站经验和运维经验,来保证我们的工作的顺利进行。专注于网站建设就选创新互联公司

购物车场景需求:

1. 商品、店铺、购物车的选择

2. 商品删除

关键代码

测试数据

var _list = [{
 checked: false,
 goods: [{
  name: "商品1",
  price: 23,
  checked: false
 }]
}, {
 checked: false,
 goods: [{
  name: "商品2",
  price: 20,
  checked: false
 }, {
  name: "商品3",
  price: 30,
  checked: false
 }]
}];

店铺对象组成购物车数组 _list
商品对象组成店铺对象下的商品数组 goods
每个商品和店铺都有自己的 checked 字段

一. 选择商品

  • 选择商品
  • 选择店铺下的所有商品
  • 选择购物车里的所有商品

数据绑定


 
 
var vue = new Vue({
 el: '.app',
 data: {
  list: _list
 }
});

监听购物车全选

computed: {
 checkedAll: function() {
  return this.checkedShopsCount == this.list.length;
 },
 checkedShopsCount: function() {
  var i = 0;
  this.list.forEach(function(item) {
   if (item.checked == true) i++;
  });
  return i;
 }
}

当店铺选择数(checkedShopsCount)等于店铺数(list.length)时,购物车全选(checkedAll)为 true
商品 & 店铺选择事件


methods: {
 setAllChecked: function(e) {
  this.list.forEach(function(shop) {
   shop.checked = e.target.checked;
   shop.goods.forEach(function(good) {
    good.checked = e.target.checked;
   });
  });
 },
 setGoodChecked: function(shop) {
  shop.goods.forEach(function(good) {
   good.checked = shop.checked;
  });
 },
 setShopChecked: function(good, shop) {
  if (!good.checked) {
   shop.checked = false;
  } else {
   // 检查店铺是否存在 checked 为 false 的商品
   shop.checked = !shop.goods.find(function(good) {
    return !good.checked;
   });
  }
 }
}

选择购物车时执行 setAllChecked,此时选择所有商品和店铺
选择店铺时执行 setGoodChecked,此时选择该店铺下所有商品
选择商品时执行 setShopChecked
    当商品 checked 为 false 时,取消选择当前店铺
    当商品 checked 为 true 时,判断当前店铺是否选择了所有商品,是则选择当前店铺,否则取消选择当前店铺

二、删除商品


methods: {
 deleteGood: function(shop,goodI,list,shopI) {
  shop.goods.splice(goodI, 1);
  if (shop.goods.length==0) {
   list.splice(shopI, 1);
  }
 }
}

全部代码





我的购物车




以上就是本文的全部内容,希望对大家的学习有所帮助,也希望大家多多支持创新互联。


分享题目:Vue实现购物车场景下的应用
网站网址:http://dzwzjz.com/article/psdchs.html
在线咨询
服务热线
服务热线:028-86922220
TOP