Vue3 极简实现购物车（全选、编辑、小计、批量操作）
一、前言购物车是前端项目里非常经典的业务场景包含新增商品、单行编辑、数量增减、单选 / 全选、自动计算选中总价、单行删除等核心功能。今天我们用 Vue3 组合式 API ref reactive不引入任何 UI 组件库纯原生手写一版完整购物车代码简洁易懂非常适合练手。二、最终实现功能清单顶部输入框新增商品非空校验添加后自动清空输入框商品行展示名称、单价、数量、自动计算小计数量加减数量最小值限制为 1不能减到 0单行编辑点击编辑按钮切换文字 / 输入框直接修改名称和价格单行删除一键删除当前商品单选 顶部全选联动自动统计商品总件数、选中商品总价保留两位小数数据全部为响应式修改后页面自动刷新。四、核心知识点拆解1. 响应式数据区分ref 与 reactiveref用来定义字符串、数字、布尔等基础类型变量。在 setup 内部修改值必须写 .value模板里使用时不需要加。reactive专门用来定义对象、数组这类引用类型直接修改对象属性就能触发页面更新不需要 .value。购物车商品列表是数组所以我们用 reactive 来定义 cartList。2. 双向绑定 v-model新增商品输入框v-modelgoodsName 实现输入内容和变量双向同步。单行复选框v-modelitem.checked 绑定每条商品的选中状态。编辑模式输入框直接 v-modelitem.name修改内容会同步到数组原始数据。3. 编辑切换v-if v-else 状态控制给每一条商品增加布尔字段 isEditisEdit false展示纯文字isEdit true展示输入框点击编辑按钮直接取反布尔值item.isEdit !item.isEdit轻松实现视图切换。4. 数量控制加号直接 item.num减号增加判断保证数量不会小于 1防止出现 0 或者负数。5. 自动小计计算单行小计直接在模板运算js运行(item.price * item.num).toFixed(2)toFixed(2) 用来保留两位小数符合金额展示规范。6. 数组方法实现总价统计不用写计算属性总件数reduce 累加所有商品数量js运行cartList.reduce((sum,item)sumitem.num,0)选中商品总价先filter筛选出勾选的商品再reduce累加金额js运行cartList.filter(ii.checked).reduce((s,i)si.price*i.num,0).toFixed(2)7. 全选联动监听全选框的 change 事件遍历整个购物车数组把每一条 checked 同步成全选框的值一键控制所有商品选中状态。8. 单行删除利用数组splice(下标,1)直接删除对应下标数据Vue 会自动更新列表。五、拓展优化方向可以自己继续升级增加 “批量删除选中商品” 功能过滤掉checkedtrue的数据增加反选联动手动把所有商品取消勾选时自动取消顶部全选给价格增加非负数校验禁止输入负数把总价提取为计算属性computed让模板更简洁增加回车快速添加商品的键盘事件对新增商品做去重判断同名商品自动合并数量六、总结这个购物车案例覆盖了 Vue3 最常用的基础语法双向绑定、条件渲染、列表循环、响应式数据、事件绑定、数组遍历运算。
相关新闻
2026/6/28 19:51:57
RL78/G23到G22移植：链接器脚本内存映射配置实战详解
1. 项目概述如果你正在从一块瑞萨RL78/G23的板子切换到一块RL78/G22的板子，编译、链接一切顺利，但程序一烧录进去要么跑飞，要么调试器根本连不上，那么问题大概率出在一个平时不怎么起眼的文件上——链接器脚本。这玩意儿就像盖房子…
阅读更多
2026/6/28 19:46:57
d2s-editor终极指南：5步快速掌握暗黑破坏神2存档编辑技巧
d2s-editor终极指南：5步快速掌握暗黑破坏神2存档编辑技巧 【免费下载链接】d2s-editor 项目地址: https://gitcode.com/gh_mirrors/d2/d2s-editor d2s-editor是一款基于Vue.js开发的开源暗黑破坏神2存档编辑器，能够帮助玩家轻松修改角色属性、管…
阅读更多
2026/6/28 19:46:57
Adobe Illustrator脚本终极指南：30+免费工具提升设计效率300%
Adobe Illustrator脚本终极指南：30免费工具提升设计效率300% 【免费下载链接】illustrator-scripts Adobe Illustrator scripts 项目地址: https://gitcode.com/gh_mirrors/il/illustrator-scripts Adobe Illustrator脚本是设计师提升工作效率的终极武器&…
阅读更多
2026/6/28 22:03:03
Lenovo Legion Toolkit 拯救者工具箱：联想游戏本性能优化的终极免费解决方案
Lenovo Legion Toolkit 拯救者工具箱：联想游戏本性能优化的终极免费解决方案 【免费下载链接】LenovoLegionToolkit Lightweight Lenovo Vantage and Hotkeys replacement for Lenovo Legion laptops. 项目地址: https://gitcode.com/gh_mirrors/le/LenovoLegionT…
阅读更多
2026/6/28 22:03:03
深入解析IDM激活脚本：开源工具如何通过注册表锁定实现永久试用
深入解析IDM激活脚本：开源工具如何通过注册表锁定实现永久试用 【免费下载链接】IDM-Activation-Script IDM Activation & Trail Reset Script 项目地址: https://gitcode.com/gh_mirrors/id/IDM-Activation-Script Internet Download Manager࿰…
阅读更多
2026/6/28 22:03:03
React Icons终极指南：企业级React图标库架构设计与最佳实践
React Icons终极指南：企业级React图标库架构设计与最佳实践 【免费下载链接】react-icons svg react icons of popular icon packs 项目地址: https://gitcode.com/gh_mirrors/re/react-icons React Icons作为现代React应用开发中不可或缺的图标解决方案&…
阅读更多
2026/6/28 22:03:03
PULPino RISC-V开发环境搭建与HelloWorld仿真实战
1. 为什么选择PULPino RISC-V开发平台 PULPino是苏黎世联邦理工学院（ETH Zurich）推出的开源32位RISC-V微控制器系统，作为PULP（Parallel Ultra Low Power）平台的精简版本，它完美继承了RISC-V架构的开放性和可…
阅读更多
2026/6/28 22:03:03
Akagi：5分钟快速上手的雀魂AI辅助工具完全指南
Akagi：5分钟快速上手的雀魂AI辅助工具完全指南 【免费下载链接】Akagi 支持雀魂、天鳳、麻雀一番街、天月麻將，能夠使用自定義的AI模型實時分析對局並給出建議，內建Mortal AI作為示例。 Supports Majsoul, Tenhou, Riichi City, Amatsuki, wi…
阅读更多
2026/6/28 21:58:02
留数法拆解有理分式：从基础到高阶的实战技巧
1. 留数法拆解有理分式的核心逻辑 第一次接触留数法时，我盯着那个复杂的积分公式看了整整半小时。直到某天深夜做习题时突然开窍——原来留数法本质上是在做"代数方程组的暴力破解"。举个生活化的例子：就像要把混合果汁分离成纯苹果汁和纯橙汁…
阅读更多
2026/6/28 0:00:06
AI Coding 六个月真实ROI账本：产品经理的血泪教训，研发的冷静忠告
6个月前的2025年12月，Boris Cherny 公开宣布自己卸载了 IDE。一时间，Vibe Coding 成了全行业最热的话题。6个月后，当我们回过头来拉一份真实账本，发现事情远没有"一句话生成一个App"那么浪漫。本文从产品经理和研发两个…
阅读更多
2026/6/28 0:00:06
审计来了，数据权限全开——审计走了，怎么确保权限全部关掉？
引言：审计结束三个月了，审计员的权限还没关某城商行每年按照监管要求开展至少一次数据安全审计。审计期间，内审部门需要抽样检查各类业务数据——交易流水、客户信息、员工操作日志、权限配置记录。这些数据分布在不同系统中，审计…
阅读更多
2026/6/28 0:00:06
AI Coding 六个月真实ROI账本：产品经理的血泪教训，研发的冷静忠告
6个月前的2025年12月，Boris Cherny 公开宣布自己卸载了 IDE。一时间，Vibe Coding 成了全行业最热的话题。6个月后，当我们回过头来拉一份真实账本，发现事情远没有"一句话生成一个App"那么浪漫。本文从产品经理和研发两个…
阅读更多
2026/6/28 0:00:06
审计来了，数据权限全开——审计走了，怎么确保权限全部关掉？
引言：审计结束三个月了，审计员的权限还没关某城商行每年按照监管要求开展至少一次数据安全审计。审计期间，内审部门需要抽样检查各类业务数据——交易流水、客户信息、员工操作日志、权限配置记录。这些数据分布在不同系统中，审计…
阅读更多