计算购物车数量和的方法、装置、电子设备和存储介质制造方法及图纸

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

【技术实现步骤摘要】

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

技术介绍

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

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

3、但是，第一种计算方法每当触发一次勾选动作，都会从头进行一次筛选、加和计算。性能方面，没有缓存，多次、大量的计算会导致浏览器内存占用、浏览器运算效率低下等问题。另一方面，计算公式由开发者编写，具有不可靠性。而第二种方法的计算属性具有缓存机制，但是本质依本文档来自技高网...

【技术保护点】

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

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

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

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

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

【技术特征摘要】

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

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

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

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

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

【专利技术属性】
技术研发人员：王天昊，张鹏，牛冠杰，
申请(专利权)人：联通在线信息科技有限公司，
类型：发明
国别省市：