vue基础--计算商品的总价格

news/2024/10/30 19:30:05/

计算商品的总价格:

1、在 父组件中 通过计算属性 动态把总价格计算出来,

2、通过 父向子传值,通过自定义属性,把值传给 子组件

父组件:

1、使用计算属性computed 计算总价格:

1.1、先用filter 过滤出 数组中所有 选中的商品(根据选中的状态 知道选中的商品)

1.2、再用reduce 累加 ,计算出所有 选中商品的 总价格

2、在引入的组件里把方法 加到子组件

子组件:

 3、props接收 父组件传给子组件的值

4、在子组件标签中 加入总价格,注意: 渲染的数字 可以使用toFixed方法,设置数字的小数点

 

 

 


http://www.ppmy.cn/news/452121.html

相关文章

dockerfile配置neo4j图形数据库连接和查询

简易版本dockerfile编写 # 请注意,跨docker访问的时候尽量还是配置一下neo4j的配置文件 FROM neo4jEXPOSE 7474 EXPOSE 7687加载数据 此处由于导入csv到dockerfile有点复杂,还是直接手动添加数据,下面算是自己实际的一个例子,可惜…

递推算法介绍

递推算法 给定一个数的序列H0,H1,…,Hn,…若存在整数n0&#xff0c;使当n>n0时,可以用等号(或大于号、小于号)将Hn与其前面的某些项Hi(0<i<n)联系起来&#xff0c;这样的式子就叫做递推关系。 递推算法是一种简单的算法&#xff0c;即通过已知条件&#xff0c;利用特…

16Aspx.com源码2013年10月到2013年12月详细

16Aspx.com源码2013年10月到2013年12月详细 创建时间FROM:创建时间TO: ExtJS合同管理信息系统源码 2013-12-13 [VS2008] 源码介绍: ExtJS合同管理信息系统源码浏览器兼容&#xff1a;IE,Firefox,谷歌等主流浏览器技术特点&#xff1a; 标准三层架构开发&#xff0c;适合…

机器学习,深度学习的资料和工具库大全

https://github.com/maismall 《Brief History of Machine Learning》 介绍:这是一篇介绍机器学习历史的文章&#xff0c;介绍很全面&#xff0c;从感知机、神经网络、决策树、SVM、Adaboost到随机森林、Deep Learning. 《Deep Learning in Neural Networks: An Overview》 介…

2022 年第十二届 MathorCup 高校数学建模挑战赛D题思路

目录 一、前言 二、问题背景 三、问题 四、解题思路 &#xff08;1&#xff09;针对问题1&#xff1a; &#xff08;2&#xff09;针对问题2&#xff1a; &#xff08;3&#xff09;针对问题3&#xff1a; 五、附上几个典型代码 &#xff08;1&#xff09;K-means算法…

必学Java类库/常用Java类库大全(awesome-java)

完整资源地址&#xff1a;http://www.21doc.net/java/awesomejava 对象映射 简化对象映射的框架。 Dozer - 使用注释&#xff0c;API或XML配置将数据从一个对象复制到另一个对象的映射器。JMapper - 使用字节码操作进行闪电快速映射。 支持注释&#xff0c;API或XML配置。Ma…

常见的一些计算机安全类词汇

Android (droid) Google 的品牌名之一&#xff0c;是基于 Linux 的移动设备&#xff08;智能手机和平板电脑&#xff09;操作系统。 ATM 窃读 一种通过在 ATM 机上安装窃读设备而进行的欺诈或盗窃。 读卡器会被伪装成 ATM 机的一部分。 该读卡器会收集受害者的账户信息和个…

gulp压缩整合css和js文件

gulp压缩整合css和js文件 原创 dadaDaShiXiong 最后发布于2018-09-18 14:28:38 阅读数 1164 收藏 发布于2018-09-18 14:28:38 版权声明&#xff1a;本文为博主原创文章&#xff0c;遵循 CC 4.0 BY-SA 版权协议&#xff0c;转载请附上原文出处链接和本声明。 本文链接&#…