当前位置: 首页 > news >正文

Vue2.0开发之——购物车案例-Footer组件封装-计算商品的总价格(51)

一 概述

  • App.vue中计算勾选商品的总价格
  • 定义子组件Footer中的商品总价格
  • 将App.vue中商品的总价格传递给Footer显示

二 App.vue中计算勾选商品的总价格

2.1 商品总价格的计算逻辑

所有勾选商品的价格*数量

2.2 App.vue中通过计算属性计算总价格

通过计算属性计算总价格

computed: {//已勾选商品的总价格amt() {//1.先filter过滤//2.再reduce累加return this.list.filter((item) => item.goods_state).reduce((total, item) => (total += item.goods_price * item.goods_count),0);},},

三 定义子组件Footer中的商品总价格

3.1 再Footer中定义商品总价格amount

props: {isFull: {type: Boolean,default: false,},amount:{type:Number,default:0}},

3.2 将amount的值渲染到页面上

<div><span>合计:</span><span class="total-price">¥{{ amount.toFixed(2) }}</span>
</div>

四 将App.vue中商品的总价格传递给Footer显示

<Footer:isfull="fullState":amount="amt":all="total"@full-change="getFullState"></Footer>

五 效果图

相关文章:

Vue2.0开发之——购物车案例-Footer组件封装-计算商品的总价格(51)

一 概述 App.vue中计算勾选商品的总价格定义子组件Footer中的商品总价格将App.vue中商品的总价格传递给Footer显示 二 App.vue中计算勾选商品的总价格 2.1 商品总价格的计算逻辑 所有勾选商品的价格*数量 2.2 App.vue中通过计算属性计算总价格 通过计算属性计算总价格 co…...

德鲁特金属导电理论(Drude)

德鲁特模型的重要等式 首先我们建立德鲁特模型的重要等式 我们把原子对于电子的阻碍作用&#xff0c;用一个冲量近似表示出来 在式子 首先定义一个等效加速度 由于 我们可以得到电导率的微观表达式 在交流电环境中 电场的表达式 借鉴上一问的公式 我们可以列出这样的表达式…...

(十一)python网络爬虫(理论+实战)——html解析库:BeautfulSoup详解

系列文章: python网络爬虫专栏 目录 序言 本节学习目标 特别申明...

四轮两驱小车(五):蓝牙HC-08通信

前言&#xff1a; 在我没接触蓝牙之前&#xff0c;我觉得蓝牙模块应用起来应该挺麻烦&#xff0c;后来发觉这个蓝牙模块的应用本质无非就是一个串口 蓝牙模块&#xff1a; 这是我从某宝上买到的蓝牙模块HC-08&#xff0c;价格还算可以&#xff0c;而且可以适用于大多数蓝牙调试…...

华为OD机试题 - 对称美学(JavaScript)| 机考必刷

华为OD机试题 最近更新的博客使用说明本篇题解:对称美学题目输入输出示例一输入输出说明示例二输入输出备注Code解题思路华为OD其它语言版本最近更新的博客 华为od 2023 | 什么是华为od,od 薪资待遇,od机试题清单华为OD机试真题大全,用 Python 解华为机试题 | 机试宝典...

Web Spider案例 网洛克 第四题 JSFuck加密 练习(八)

声明 此次案例只为学习交流使用&#xff0c;抓包内容、敏感网址、数据接口均已做脱敏处理&#xff0c;切勿用于其他非法用途&#xff1b; 文章目录声明一、资源推荐二、逆向目标三、抓包分析 & 下断分析逆向3.1 抓包分析3.2 下断分析逆向拿到混淆JS代码3.3 JSFuck解决方式…...

【JavaScript速成之路】JavaScript数组

&#x1f4c3;个人主页&#xff1a;「小杨」的csdn博客 &#x1f525;系列专栏&#xff1a;【JavaScript速成之路】 &#x1f433;希望大家多多支持&#x1f970;一起进步呀&#xff01; 文章目录前言1&#xff0c;初识数组1.1&#xff0c;数组1.2&#xff0c;创建数组1.3&…...

路由传参含对象数据刷新页面数据丢失

目录 一、问题描述 二、 解决办法 一、问题描述 【1】众所周知&#xff0c;在veu项目开发过程中&#xff0c;我们常常会用到通过路由的方式在页面中传递数据。但是用到this.$route.query.ObjectData的页面&#xff0c;刷新后会导致this.$route.query.ObjectData数据丢失。 …...

大数据flink框架入门分享(起源与发展、实时与离线计算、场景、处理流程、相关概念、特性普及、入门Demo)

文章目录起源与发展flink在github上的现状实时计算VS离线计算实时计算离线计算实时计算常用的场景框架流处理流程flink电商场景下的业务图示例flink中一些重要特性有界数据和无界数据时间语义、水位线事件时间处理时间水位线flink窗口概念理想中的数据处理含有延迟数据的数据处…...

由点到面贯穿整个Java泛型理解

泛型概述 Java泛型(generics)是DK5中引入的一个新特性&#xff0c;泛型提供了编译时类型安全监测机制&#xff0c;该机制允许我们在编译时检测到非法的类型数据结构。 泛型的本质就是参数化类型&#xff0c;也就是所操作的数据类型被指定为一个参数。 如我们经常使用的Array…...

北斗RTK高精度定位在AI领域的应用

随着北斗高精度定位技术越来越成熟&#xff0c;通过GNSS高精度定位与机器人结合&#xff0c;越来越多的智能机器人走进我们生活中。像驾培机器人、智能除草机器人、智能巡检机器人、北斗划线机器人等智能机器人已经广泛的投入使用。驾培机器人驾培机器人&#xff1a;通考车安装…...

2023年再不会 IOC 源码,就要被淘汰了

&#x1f44f;作者简介&#xff1a;大家好&#xff0c;我是爱敲代码的小黄&#xff0c;独角兽企业的Java开发工程师&#xff0c;CSDN博客专家&#xff0c;阿里云专家博主&#x1f4d5;系列专栏&#xff1a;Java设计模式、数据结构和算法、Kafka从入门到成神、Kafka从成神到升仙…...

MQ面试题

1、为什么使用消息队列&#xff1f; 其实就是问问你消息队列都有哪些使用场景&#xff0c;然后你项目里具体是什么场景&#xff0c;说说你在这个场景里用消息队列是什么&#xff1f; 面试官问你这个问题&#xff0c;期望的一个回答是说&#xff0c;你们公司有个什么业务场景&…...

pnpm 基本详细使用(安装、卸载、使用)

一、简介 官网地址、GitHub地址、官方安装文档、官方卸载文档。 pnpm 全称 performant npm&#xff0c;意思为 高性能的 npm。pnpm 由 npm/yarn 衍生而来&#xff0c;解决了 npm/yarn 内部潜在的 bug&#xff0c;极大的优化了性能&#xff0c;扩展了使用场景。被誉为 最先进的…...

Kafka生产者的粘性分区算法

分区算法分类 kafka在生产者投递消息时&#xff0c;会根据是否有key采取不用策略来获取分区。 存在key时会根据key计算一个hash值&#xff0c;然后采用hash%分区数的方式获取对应的分区。 而不存在key时采用随机算法选取分区&#xff0c;然后将所有的消息封装到这个batch上直…...

java基础篇

1.基础篇注释注释是在程序指定位置添加的说明性信息注释不参与程序运行&#xff0c;仅起到说明作用单行注释 格式&#xff1a;// 注释信息多行注释 格式&#xff1a;/* 注释信息 */关键字关键字&#xff1a;就是被Java语言赋予了特定含义的单词java中共有53个关键字1.全部有小写…...

Java与Winform进行AES加解密数据传输的工具类与对应关系和示例

场景 AndroidJava中使用Aes对称加密的工具类与使用&#xff1a; AndroidJava中使用Aes对称加密的工具类与使用_霸道流氓气质的博客-CSDN博客 上面讲的Java与安卓进行数据传输时使用AES加解密的示例工具类。 如果Java需要与其他第三方平台比如Winform程序进行数据传递时也需…...

OpenAI模型的API调用与使用-测试(2)

OpenAI模型的API调用与使用-测试&#xff08;2&#xff09;1. 参考Quick start搭建一个demo1.1 安装openai包1.2 demo测试11.3 demo测试2参考资料1. 参考Quick start搭建一个demo 1.1 安装openai包 注意关掉科学上网工具&#xff0c;下载openai包 pip install openai安装好后…...

【LeetCode】剑指 Offer 22. 链表中倒数第k个节点 p136 -- Java Version

题目链接&#xff1a;https://leetcode.cn/problems/lian-biao-zhong-dao-shu-di-kge-jie-dian-lcof/ 1. 题目介绍&#xff08;22. 链表中倒数第k个节点&#xff09; 输入一个链表&#xff0c;输出该链表中倒数第k个节点。为了符合大多数人的习惯&#xff0c;本题从1开始计数&…...

经典卷积模型回顾7-轻量化模型MobileNet实现图像分类(matlab)

MobileNet是一种轻量级卷积神经网络&#xff0c;适用于较小的设备和低功耗环境。在MATLAB中&#xff0c;可以使用Deep Learning Toolbox进行MobileNet的图像分类训练。 使用预先训练好的MobileNet模型对自定义数据集进行微调训练&#xff1a; matlab % 导入数据集 imds im…...

准备工作之动态内存分配[基于郝斌课程]

定义一块内存可以用数组定义&#xff0c;也可以动态分配&#xff1a;使用数组定义一块内存&#xff0c;则该块内存是静态的&#xff0c;也就是一旦定义之后&#xff0c;这块内存的大小就固定了&#xff0c;例如&#xff0c;数组元素个数是5&#xff0c;则定义后&#xff0c;这这…...

保姆级教程:在OpenEuler 22.03 LTS-SP4上,用cephadm搞定Ceph Pacific集群部署

在OpenEuler 22.03 LTS-SP4上部署Ceph Pacific集群的完整指南 OpenEuler作为国产操作系统的代表&#xff0c;凭借其高性能和安全性&#xff0c;正逐渐成为企业级应用的首选。而Ceph作为开源的分布式存储解决方案&#xff0c;以其高可靠性和可扩展性赢得了广泛认可。本文将详细介…...

Pspice仿真新手避坑大全:为什么你的TL431仿真总报错?可能是模型库没加对

Pspice仿真新手避坑大全&#xff1a;为什么你的TL431仿真总报错&#xff1f; 刚接触Pspice的工程师们&#xff0c;是否经常遇到这样的场景&#xff1a;精心设计的TL431电路图明明检查了无数遍&#xff0c;点击仿真按钮后却弹出一堆令人困惑的错误提示&#xff1f;这就像拼好了乐…...

基于Maxwell的750W内转子伺服电机设计:14极12槽优化方案解析

基于maxwwell设计的经典750W&#xff0c;3000RPM 内转子 私服电机&#xff0c;14极12槽&#xff0c;外径76 轴向长度56.7 &#xff0c;转矩1Nm,直流母线12V&#xff0c;辅助槽优化了齿槽转矩&#xff0c;特色是转子加工方便&#xff0c;永磁同步电机&#xff08;PMSM BLDC&…...

Phi-4-mini-reasoning推理模型5分钟快速上手:数学题逻辑题一键解答

Phi-4-mini-reasoning推理模型5分钟快速上手&#xff1a;数学题逻辑题一键解答 1. 为什么选择Phi-4-mini-reasoning&#xff1f; 如果你经常需要解决数学题、逻辑题或者需要一步步分析的问题&#xff0c;Phi-4-mini-reasoning就是为你量身定制的AI助手。这个模型不像那些通用…...

面试题-Mysql篇

什么是存储过程存储过程是一组SQL语句的集合&#xff0c;它们在数据库中预先编译并存储。它们用于封装一组操作&#xff0c;提高性能、减少网络流量&#xff0c;并提供可重用的代码逻辑。存储过程还可以实现数据安全性和数据完整性。mysql如何查询最后一条数据使用ORDER BY根据…...

Keyv自定义序列化教程:超越JSON,支持更多数据类型

Keyv自定义序列化教程&#xff1a;超越JSON&#xff0c;支持更多数据类型 【免费下载链接】keyv jaredwray/keyv: 这是一个分布式键值存储库&#xff0c;用于在多个节点上存储数据。适合用于需要分布式存储和访问的场景。特点&#xff1a;易于使用&#xff0c;支持多种数据存储…...

C++手动实现共享智能指针my_shared_ptr|引用计数+删除器+完整可运行代码

1.共享智能指针的概念 共享型智能指针就是做出一个像JAVA中垃圾回收器,并且可以运用到所有资源,heap内存和系统资源都可以使用的系统。 shared_ptr实现了共享所有权(shared ownership)方式来管理资源对象,这意味没有一个特定的shared_ptr拥有资源对象。相反,这些指向同一…...

树莓派新手必看:保姆级vim安装与配置指南(含国内源切换和常见报错解决)

树莓派新手必看&#xff1a;保姆级vim安装与配置指南&#xff08;含国内源切换和常见报错解决&#xff09; 第一次接触树莓派的新手们&#xff0c;面对命令行操作往往既兴奋又忐忑。作为Linux系统中最强大的文本编辑器之一&#xff0c;vim的高效与灵活令人向往&#xff0c;但初…...

LangChain + AgentRun 浏览器沙箱极简集成指南

AgentRun Browser Sandbox 介绍 什么是 Browser Sandbox? Browser Sandbox 是 AgentRun 平台提供的云原生无头浏览器沙箱服务,基于阿里云函数计算&#xff08;FC&#xff09;构建。它为智能体提供了一个安全隔离的浏览器执行环境,支持通过标准的 Chrome DevTools Protocol (…...