当前位置：Gxlcms > JavaScript > Vue实现购物车场景下的应用

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

时间：2021-07-01 10:21:17 帮助过：11人阅读

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

购物车场景需求：

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

2. 商品删除

关键代码

测试数据

  1. var _list = [{
  2.  checked: false,
  3.  goods: [{
  4.   name: "商品1",
  5.   price: 23,
  6.   checked: false
  7.  }]
  8. }, {
  9.  checked: false,
  10.  goods: [{
  11.   name: "商品2",
  12.   price: 20,
  13.   checked: false
  14.  }, {
  15.   name: "商品3",
  16.   price: 30,
  17.   checked: false
  18.  }]
  19. }];

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

一. 选择商品

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

数据绑定

  1. <body class="app">
  2.  <input type="checkbox" v-if="list.length" v-model="checkedAll">
  3.  <div v-for="(shopI, shop) in list" class="shop">
  4.   <input type="checkbox" v-model="shop.checked">
  5.   <div v-for="(goodI, good) in shop.goods" class="good">
  6.    <input type="checkbox" v-model="good.checked">
  7.    <span v-html="good.name"></span>
  8.    <span v-html="good.age"></span>
  9.   </div>
  10.  </div>
  11. </body>
  1. var vue = new Vue({
  2.  el: '.app',
  3.  data: {
  4.   list: _list
  5.  }
  6. });

监听购物车全选

  1. computed: {
  2.  checkedAll: function() {
  3.   return this.checkedShopsCount == this.list.length;
  4.  },
  5.  checkedShopsCount: function() {
  6.   var i = 0;
  7.   this.list.forEach(function(item) {
  8.    if (item.checked == true) i++;
  9.   });
  10.   return i;
  11.  }
  12. }

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

  1. <input type="checkbox" v-if="list.length" v-model="checkedAll" @change="setAllChecked($event)">
  2. <div v-for="(shopI, shop) in list">
  3.  <input type="checkbox" v-model="shop.checked" @change="setGoodChecked(shop)">
  4.  <div v-for="(goodI, good) in shop.goods">
  5.   <input type="checkbox" v-model="good.checked" @change="setShopChecked(good, shop)">
  6.   <span v-html="good.name"></span>
  7.   <span v-html="good.age"></span>
  8.  </div>
  9. </div>
  1. methods: {
  2.  setAllChecked: function(e) {
  3.   this.list.forEach(function(shop) {
  4.    shop.checked = e.target.checked;
  5.    shop.goods.forEach(function(good) {
  6.     good.checked = e.target.checked;
  7.    });
  8.   });
  9.  },
  10.  setGoodChecked: function(shop) {
  11.   shop.goods.forEach(function(good) {
  12.    good.checked = shop.checked;
  13.   });
  14.  },
  15.  setShopChecked: function(good, shop) {
  16.   if (!good.checked) {
  17.    shop.checked = false;
  18.   } else {
  19.    // 检查店铺是否存在 checked 为 false 的商品
  20.    shop.checked = !shop.goods.find(function(good) {
  21.     return !good.checked;
  22.    });
  23.   }
  24.  }
  25. }

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

二、删除商品

  1. <input type="button" value="删除" @click="deleteGood(shop,goodI,list,shopI)">
  1. methods: {
  2.  deleteGood: function(shop,goodI,list,shopI) {
  3.   shop.goods.splice(goodI, 1);
  4.   if (shop.goods.length==0) {
  5.    list.splice(shopI, 1);
  6.   }
  7.  }
  8. }

全部代码

  1. <!DOCTYPE html>
  2. <html lang="en">
  3. <head>
  4. <meta charset="UTF-8">
  5. <title>我的购物车</title>
  6. <script src="vue.min.js"></script>
  7. </head>
  8. <body class="app">
  9. <input type="checkbox" v-if="list.length" v-model="checkedAll" @change="setAllChecked($event)">
  10. <div v-for="(shopI, shop) in list">
  11. <input type="checkbox" v-model="shop.checked" @change="setGoodChecked(shop)">
  12. <div v-for="(goodI, good) in shop.goods">
  13. <input type="checkbox" v-model="good.checked" @change="setShopChecked(good, shop)">
  14. <span v-html="good.name"></span>
  15. <span v-html="good.age"></span>
  16. <input type="button" value="删除" @click="deleteGood(shop,goodI,list,shopI)">
  17. </div>
  18. </div>
  19. </body>
  20. <script>
  21. var _list = [{
  22. checked: false,
  23. goods: [{
  24. name: "商品1",
  25. money: 23,
  26. checked: false
  27. }]
  28. }, {
  29. checked: false,
  30. goods: [{
  31. name: "商品2",
  32. money: 20,
  33. checked: false
  34. }, {
  35. name: "商品3",
  36. money: 30,
  37. checked: false
  38. }]
  39. }];
  40. var vue = new Vue({
  41. el: '.app',
  42. data: {
  43. list: _list
  44. },
  45. computed: {
  46. checkedAll: function() {
  47. return this.checkedShopsCount == this.list.length;
  48. },
  49. checkedShopsCount: function() {
  50. var i = 0;
  51. this.list.forEach(function(item) {
  52. if (item.checked == true) i++;
  53. });
  54. return i;
  55. }
  56. },
  57. methods: {
  58. setGoodChecked: function(shop) {
  59. shop.goods.forEach(function(good) {
  60. good.checked = shop.checked;
  61. });
  62. },
  63. setShopChecked: function(good, shop) {
  64. if (!good.checked) {
  65. shop.checked = false;
  66. } else {
  67. shop.checked = !shop.goods.find(function(good) {
  68. return !good.checked;
  69. });
  70. }
  71. },
  72. setAllChecked: function(e) {
  73. this.list.forEach(function(shop) {
  74. shop.checked = e.target.checked;
  75. shop.goods.forEach(function(good) {
  76. good.checked = e.target.checked;
  77. });
  78. });
  79. },
  80. deleteGood: function(shop, goodI, list, shopI) {
  81. shop.goods.splice(goodI, 1);
  82. if (shop.goods.length == 0) {
  83. list.splice(shopI, 1);
  84. }
  85. }
  86. }
  87. });
  88. </script>
  89. </html>

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

人气教程排行

本站所有资源全部来源于网络，若本站发布的内容侵害到您的隐私或者利益，请联系我们删除！