计算购物车数量和的方法、装置、电子设备和存储介质与流程

本公开涉及数据处理领域，尤其涉及一种计算购物车数量和的方法、装置、电子设备和存储介质。

背景技术：

1、随着科技的不断进步和互联网的普及，网购在现在生活中扮演着越来越重要的角色。它改变了传统的购物方式，带来了购物便捷、品类丰富等诸多优点。在各类电商平台均设有购物车功能，购物者可以选择心仪的商品加入购物车，待挑选完毕后，勾选所需的商品进行支付，页面上会计算并展示出共计x件商品，共计y元。

2、现有的计算方法主要可以分为两种，一种是监听勾选商品的动作，当触发勾选商品或者取消勾选时，遍历商品数组，通过js动态计算已勾选的商品数量之和；另一种是维护一个已勾选商品数组，利用vue的computed计算属性，将已勾选商品数组作为该计算属性的依赖，当数组变动，自动计算出商品数量之和并渲染到页面上。

3、但是，第一种计算方法每当触发一次勾选动作，都会从头进行一次筛选、加和计算。性能方面，没有缓存，多次、大量的计算会导致浏览器内存占用、浏览器运算效率低下等问题。另一方面，计算公式由开发者编写，具有不可靠性。而第二种方法的计算属性具有缓存机制，但是本质依然是用js进行计算。js是解释性语言，需要被浏览器解析并转换成机器语言，因此执行效率较低；同时需要编写较多的代码，会增加后期的维护性。

4、因此，需要一种可以提升代码的执行效率的计算购物车数量和的方法。

技术实现思路

1、本公开提供了一种计算购物车数量和的方法、装置、电子设备和存储介质。

2、根据本公开的第一方面，提供了一种计算购物车数量和的方法。该方法包括：

3、在模板层创建容器组件，所述容器组件包括多选框和结果显示；

4、在数据层定义页面中商品数量的变量；

5、利用vue的动态绑定属性方式在所述多选框上绑定style属性，并传入属性值；

6、在css样式表中利用计数器计算已勾选商品数量；

7、利用counter-reset对最外层容器组件进行计数器的初始化；

8、在所述多选框的表单组件中设置伪类代表已勾选商品，并对初始化的计数器进行累加计算；

9、在预留结果展示组件中用after伪元素的content属性，输出计数器结果。

10、进一步地，所述在模板层创建容器组件，所述容器组件包括多选框和结果显示，包括：

11、创建容器组件的模板部分；

12、在所述容器组件的模板中为每个商品创建唯一的多选框表单；

13、创建用于展示数量和结果的元素组件的模板部分；

14、将所述容器组件和结果组件添加到对应的父组件中。

15、进一步地，所述在数据层定义页面中商品数量的变量，包括：

16、在数据层定义商品数量的变量，并初始化商品变量的初始值；

17、获取用户操作更新所述商品变量的值。

18、进一步地，所述利用vue的动态绑定属性方式在所述多选框上绑定style属性，并传入属性值，包括：

19、在所述多选框上利用vue的动态绑定属性方式绑定style属性，并自定义css属性；

20、将属性值传入所述多选框对应的商品数量的变量。

21、进一步地，所述在css样式表中利用计数器计算已勾选商品数量，包括：

22、在css样式表中定义一个计数器，并将它应用于所述多选框的父元素；

23、将计数器值显示在页面上，并在多选框组件的父元素中使用伪元素将计数器值添加到html内容中。

24、进一步地，所述在所述多选框的表单组件中设置伪类代表已勾选商品，并对初始化的计数器进行累加计算，包括：

25、在每种商品对应的表单组件中设置伪类checked代表已勾选商品；

26、用counter-increment属性对计数器进行所述已勾选的商品的累加计算，累加值为传入属性值。

27、进一步地，所述在预留结果展示组件中用after伪元素的content属性，输出计数器结果，包括：

28、在预留展示结果的result组件中添加after伪元素；

29、在计数器所处的父元素上设置counter-reset属性来输出计数器结果。

30、根据本公开的第二方面，提供了一种计算购物车数量和的装置。该装置包括：

31、创建模块，用于在模板层创建容器组件，所述容器组件包括多选框和结果显示；

32、定义模块，用于在数据层定义页面中商品数量的变量；

33、绑定模块，用于利用vue的动态绑定属性方式在所述多选框上绑定style属性，并传入属性值；

34、计算模块，用于在css样式表中利用计数器计算已勾选商品数量；

35、初始化模块，用于利用counter-reset对最外层容器组件进行计数器的初始化；

36、设置模块，用于在所述多选框的表单组件中设置伪类代表已勾选商品，并对初始化的计数器进行累加计算；

37、输出模块，用于在预留结果展示组件中用after伪元素的content属性，输出计数器结果。

38、根据本公开的第三方面，提供了一种电子设备。该电子设备包括：存储器和处理器，所述存储器上存储有计算机程序，所述处理器执行所述程序时实现一种计算购物车数量和的方法和/或一种计算购物车数量和的方法。

39、根据本公开的第四方面，提供了一种计算机可读存储介质，其上存储有计算机程序，所述程序被处理器执行时实现一种计算购物车数量和的方法和/或一种计算购物车数量和的方法。

40、本公开通过在模板层创建容器组件，我们可以将多选框和结果显示的相关元素组合在一起，形成一个功能完整的组件。这样的组件可以提供更好的可维护性和复用性，便于对多选框和结果显示进行统一管理；在数据层定义页面中商品数量的变量，可以方便地跟踪和管理已勾选商品的数量；利用vue的动态绑定方式，我们可以将属性值动态传入多选框的style属性中。这样可以根据商品数量的变化，实时更新多选框的样式；在css样式表中，利用计数器可以方便地计算已勾选商品的数量。通过使用计数器进行累加计算，可以实时获取已勾选商品的总数量；在多选框的表单组件中设置伪类:checked，用于标记已勾选的商品。这种方式可以使用户在界面上直观地看到已勾选和未勾选的商品；在预留的结果展示组件中展示计数器的结果。将计数器的值输出到结果组件中，可以提供给用户一个清晰的视觉反馈，方便他们了解已勾选商品的数量。因此，通过采用css计数器属性的方式替代了传统的javascript来计算商品数量和，可以提升代码的执行效率和性能。

41、应当理解，
技术实现要素：
部分中所描述的内容并非旨在限定本公开实施例的关键或重要特征，亦非用于限制本公开的范围。本公开的其它特征将通过以下的描述变得容易理解。

技术特征：

1.一种计算购物车数量和的方法，其特征在于，包括：

2.根据权利要求1所述的计算购物车数量和的方法，其特征在于，所述在模板层创建容器组件，所述容器组件包括多选框和结果显示，包括：

3.根据权利要求1所述的计算购物车数量和的方法，其特征在于，所述在数据层定义页面中商品数量的变量，包括：

4.根据权利要求1所述的计算购物车数量和的方法，其特征在于，所述利用vue的动态绑定属性方式在所述多选框上绑定style属性，并传入属性值，包括：

5.根据权利要求1所述的计算购物车数量和的方法，其特征在于，所述在css样式表中利用计数器计算已勾选商品数量，包括：

6.根据权利要求1所述的计算购物车数量和的方法，其特征在于，所述在所述多选框的表单组件中设置伪类代表已勾选商品，并对初始化的计数器进行累加计算，包括：

7.根据权利要求1所述的计算购物车数量和的方法，其特征在于，所述在预留结果展示组件中用after伪元素的content属性，输出计数器结果，包括：

8.一种计算购物车数量和的装置，其特征在于，包括：

9.一种电子设备，包括：

10.一种存储有计算机指令的非瞬时计算机可读存储介质，其中，所述计算机指令用于使所述计算机执行根据权利要求1-7中任一权利要求所述的方法。

技术总结
本申请提供了一种计算购物车数量和的方法。应用于数据处理技术领域，所述方法包括在模板层创建容器组件；在数据层定义页面中商品数量的变量；利用vue的动态绑定属性方式在所述多选框上绑定style属性，并传入属性值；在CSS样式表中利用计数器计算已勾选商品数量；利用counter‑reset对最外层容器组件进行计数器的初始化；在所述多选框的表单组件中设置伪类代表已勾选商品，并对初始化的计数器进行累加计算；在预留结果展示组件中用after伪元素的content属性，输出计数器结果。以此方式，可以提升代码的执行效率和性能。

技术研发人员：王天昊,张鹏,牛冠杰
受保护的技术使用者：联通在线信息科技有限公司
技术研发日：
技术公布日：2024/4/17