Day17-购物车页面-结算-动态计算已勾选商品的数据和选中状态

news2024/9/24 21:20:51

1.动态渲染已勾选商品的总数量

 我的操作:

1》在 store/cart.js 模块中,定义一个名称为 checkedCount 的 getters,用来统计已勾选商品的总数量:

2》在 my-settle 组件中,通过 mapGetters 辅助函数,将需要的 getters 映射到当前组件中使用

 

3》将 checkedCount 的值渲染到页面中:

阶段效果图:【2+1+1 = 4】

 

 

 **************************************************************************************************************

2.动态渲染全选按钮的选中状态

我的操作: 

1》使用 mapGetters 辅助函数,将商品的总数量映射到当前组件中使用,并定义一个叫做 isFullCheck 的计算属性:

 2》为 radio 组件动态绑定 checked 属性的值:

 

阶段效果图:

情况①[未全选]:                                           情况②[全选]:

     

 **************************************************************************************************************

3.简写之前在cart.js的getters里面的total方法,也是用reduce的数组方法:

我的操作:

 

效果图与之前一模一样。

本文来自互联网用户投稿,该文观点仅代表作者本人,不代表本站立场。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如若转载,请注明出处:http://www.coloradmin.cn/o/56839.html

如若内容造成侵权/违法违规/事实不符,请联系多彩编程网进行投诉反馈,一经查实,立即删除!

相关文章

[附源码]Python计算机毕业设计Django健身房信息管理

项目运行 环境配置: Pychram社区版 python3.7.7 Mysql5.7 HBuilderXlist pipNavicat11Djangonodejs。 项目技术: django python Vue 等等组成,B/S模式 pychram管理等等。 环境需要 1.运行环境:最好是python3.7.7,…

GIS工具maptalks开发手册(五)01-用JSON载入地图——json格式绘制多个面之基础版

GIS工具maptalks开发手册(五)01-用JSON载入地图——json格式绘制多个面之基础版 效果-json渲染图层基础版 代码 index.html <!DOCTYPE html> <html> <meta charset"UTF-8"> <meta name"viewport" content"widthdevice-width,…

HTML5期末考核大作业,网站——旅游景点。 学生旅行 游玩 主题住宿网页

&#x1f389;精彩专栏推荐&#x1f447;&#x1f3fb;&#x1f447;&#x1f3fb;&#x1f447;&#x1f3fb; ✍️ 作者简介: 一个热爱把逻辑思维转变为代码的技术博主 &#x1f482; 作者主页: 【主页——&#x1f680;获取更多优质源码】 &#x1f393; web前端期末大作业…

【网络层】流量控制VS拥塞控制、路由器功能、SDN控制平面

文章目录前言网络层功能流量控制VS拥塞控制拥塞控制路由器功能转发---硬件解决------数据平面---------处理数据各种转发路由选择---软件解决---控制平面----控制网络协议运行-------OSPF、RIP、BGP数据平面控制平面---路由选择传统方法-------每路由器法----------路由选择处理…

[附源码]计算机毕业设计疫苗及注射管理系统Springboot程序

项目运行 环境配置&#xff1a; Jdk1.8 Tomcat7.0 Mysql HBuilderX&#xff08;Webstorm也行&#xff09; Eclispe&#xff08;IntelliJ IDEA,Eclispe,MyEclispe,Sts都支持&#xff09;。 项目技术&#xff1a; SSM mybatis Maven Vue 等等组成&#xff0c;B/S模式 M…

Ubuntu20.04 通过deb包方式安装微信

写在前面 写文时间&#xff1a;2022.12.03 周六 自己的系统是Ubuntu20.04.5&#xff0c;安装的是 weixin_2.1.1_amd64.deb。 安装微信 从优麒麟官网下载微信deb安装包。 下载完成后&#xff0c;直接安装即可 sudo dpkg -i weixin_2.1.1_amd64.deb参考链接 [1] 优麒麟官网…

基于HFSS的线阵综合分析

摘要&#xff1a; 常规的阵列天线方向图综合是基于阵因子分析法&#xff0c;且不考虑单元之间电磁耦合的一种快速分析手段。本次推文则简单阐述一个基于HFSS的线阵综合实例。 HFSS中的直线阵 均匀直线阵的基础知识已在前面的推文中进行了多次阐述举例&#xff0c;这里就不赘…

正则表达式中的元字符,量词:贪婪和非贪婪,转义符: \s: 记得使用-z --null-data: 使用ascii码中空字符来替换新行,分组:““,和‘‘

正则表达式的所有内容&#xff1a;&#xff08;每一个解释下面都带一个样例&#xff09; 1.元字符 \&#xff1a;忽略后面一个字符的特殊含义 [a-b]&#xff1a;对a到b之间的任何字符进行匹配 ^&#xff1a;在每行的开始进行匹配 $ &#xff1a;在每行的末尾进行匹配 . .&…

FFmpeg编译参数分析

config.mak 来传递给 makefile &#xff0c;还会生成 config.h 给 C 程序 include 引入。 由于 configure 脚本的编译参数是非常多的&#xff0c;本文主要讲解一些比较常用的编译参数&#xff0c;一些特殊的编译参数&#xff0c;读者可通过以下命令查询。 configure --help1&…

[附源码]计算机毕业设计springboot小区物业管理系统

项目运行 环境配置&#xff1a; Jdk1.8 Tomcat7.0 Mysql HBuilderX&#xff08;Webstorm也行&#xff09; Eclispe&#xff08;IntelliJ IDEA,Eclispe,MyEclispe,Sts都支持&#xff09;。 项目技术&#xff1a; SSM mybatis Maven Vue 等等组成&#xff0c;B/S模式 M…

现金储备超400亿的小鹏,进入中途蓄力时刻

作者 | 刘洪 编辑 | Bruce造车新势力正在变得更加成熟。 11月30日美股盘前&#xff0c;小鹏汽车发布2022年Q3财报。如果说第一季度盈利曙光初现&#xff0c;第二季度逆势增长&#xff0c;那么第三季度&#xff0c;就是一次中途蓄力。 报告期内&#xff0c;小鹏的净亏损环比收窄…

Seata的这些安保机制是否会让你更放心

一、背景 SpringBoot 项目&#xff0c;通过引入seata-spring-boot-starter来接入 Seata&#xff0c;Seata 的能力会通过 SpringBoot 的自动装配机制来引入。在学习的时候是梳理有什么强大的、科技感十足的能力&#xff0c;但在试点的时候则更多考虑的是有哪些安保机制&#xf…

将内网网站发布上线【免服务器】

什么是cpolar&#xff1f; cpolar是一个非常强大的内网穿透工具&#xff0c;开发调试的必备利器。 它可以将本地内网服务器的HTTP、HTTPS、TCP协议端口映射为公网地址端口&#xff0c;使得公网用户可以轻松访问您的内网服务器&#xff0c;无需部署至公网服务器。支持永久免费使…

Mysql进阶学习(七)联合查询与DML语言

Mysql进阶学习&#xff08;七&#xff09;联合查询与DML语言进阶9&#xff1a;联合查询语法&#xff1a;特点&#xff1a;★案例DML语言1、插入语句1.1.插入的值的类型要与列的类型一致或兼容1.2.不可以为null的列必须插入值。可以为null的列如何插入值&#xff1f;1.3.列的顺序…

机械转码日记【26】二叉搜索树

目录 前言 1.二叉搜索数的概念 2.二叉搜索树的实现 2.1 基本架构 2.2二叉搜索树的插入 2.2.1普通版本 2.2.2递归版本 2.3二叉搜索树的查找 2.3.1普通版本 2.3.2递归版本 2.4二叉搜索树的删除 2.4.1普通版本代码 2.4.2递归版本代码 2.5搜索树的析构函数 2.6搜…

电脑黑屏按什么键恢复?只需要3个键就可以解决黑屏

今天和大家聊一聊电脑黑屏这个问题。相信大家都遇到过电脑黑屏&#xff0c;但是却不知道该如何解决&#xff0c;今天就来给大家分享一些处理方法。如果是电脑黑屏的话&#xff0c;一般情况下&#xff0c;只需要三个键就可以解决问题&#xff0c;电脑黑屏按什么键恢复&#xff1…

【Matplotlib绘制图像大全】(九):Matplotlib使用xticks()修改x轴刻度位置信息

前言 大家好,我是阿光。 本专栏整理了《Matplotlib绘制图像大全》,内包含了各种常见的绘图方法,以及Matplotlib各种内置函数的使用方法,帮助我们快速便捷的绘制出数据图像。 正在更新中~ ✨ 🚨 我的项目环境: 平台:Windows10语言环境:python3.7编译器:PyCharmMatp…

提到Canvas,必须好好唠唠它的图像操作能力

前情提要 接续一下之前对Canvas的探索。本篇分享一下对图像操作的阅读和研究。 日常开发中&#xff0c;时常遇到对图像的处理的场景。精美的图像做为背景或者场景&#xff0c;相对会吸引人。 Canvas图像API十分强大。可以通过Canvas图像API加载图像数据&#xff0c;进行裁剪…

ubuntu篇---ubuntu安装mysql教程

ubuntu篇---ubuntu安装mysql教程一. 首先卸载掉原来的mysql第一步&#xff0c;依次执行下面的语句第2步 清理残留数据第三步 验证原有主机上是否安装mysql&#xff1a;二. 安装mysql三. 修改密码加粗样式ubuntu安装mysql教程 一. 首先卸载掉原来的mysql 第一步&#xff0c;依…

深入理解蓝牙BLE之“扩展广播”

目录 前言&#xff1a; 4.2版本广播&#xff1a; 5.0版本广播&#xff1a; 实现原理&#xff1a; 格式定义&#xff1a; 广播事件类型&#xff1a; 扩展广播&#xff1a; 周期广播&#xff1a; 广播集&#xff1a; HCI接口定义&#xff1a; 4.2版本&#xff1a; 5.…