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

站长资源 2024/11/28 佚名

2 0 1

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

购物车场景需求：

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 字段

一. 选择商品

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

数据绑定

<body class="app">
 <input type="checkbox" v-if="list.length" v-model="checkedAll">
 <div v-for="(shopI, shop) in list" class="shop">
  <input type="checkbox" v-model="shop.checked">
  <div v-for="(goodI, good) in shop.goods" class="good">
   <input type="checkbox" v-model="good.checked">
   <span v-html="good.name"></span>
   <span v-html="good.age"></span>
  </div>
 </div>
</body>

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
商品 & 店铺选择事件

<input type="checkbox" v-if="list.length" v-model="checkedAll" @change="setAllChecked($event)">
<div v-for="(shopI, shop) in list">
 <input type="checkbox" v-model="shop.checked" @change="setGoodChecked(shop)">
 <div v-for="(goodI, good) in shop.goods">
  <input type="checkbox" v-model="good.checked" @change="setShopChecked(good, shop)">
  <span v-html="good.name"></span>
  <span v-html="good.age"></span>
 </div>
</div>

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 时，判断当前店铺是否选择了所有商品，是则选择当前店铺，否则取消选择当前店铺

二、删除商品

<input type="button" value="删除" @click="deleteGood(shop,goodI,list,shopI)">

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

全部代码

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>我的购物车</title>
<script src="/UploadFiles/2021-04-02/vue.min.js">

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

Vue,购物车

广告合作：本站广告合作请联系QQ：858582 申请时备注：广告合作（否则不回）
免责声明：本站资源来自互联网收集,仅供用于学习和交流,请遵循相关法律法规,本站一切资源不代表本站立场,如有侵权、后门、不妥请联系本站删除！

评论“Vue实现购物车场景下的应用”

暂无评论...

P70系列延期，华为新旗舰将在下月发布

3月20日消息，近期博主@数码闲聊站透露，原定三月份发布的华为新旗舰P70系列延期发布，预计4月份上市。

而博主@定焦数码爆料，华为的P70系列在定位上已经超过了Mate60，成为了重要的旗舰系列之一。它肩负着重返影像领域顶尖的使命。那么这次P70会带来哪些令人惊艳的创新呢？
根据目前爆料的消息来看，华为P70系列将推出三个版本，其中P70和P70 Pro采用了三角形的摄像头模组设计，而P70 Art则采用了与上一代P60 Art相似的不规则形状设计。这样的外观是否好看见仁见智，但辨识度绝对拉满。

更新日志

2024年11月28日

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

Vue.js搭建移动端购物车界面

javascript字体颜色控件的开发 JS实现字体控制

评论“Vue实现购物车场景下的应用”

P70系列延期，华为新旗舰将在下月发布

更新日志

友情链接