用 computed 实现购物车金额自动汇总，核心是定义 totalPrice 计算属性，通过 reduce 遍历 cartItems 累加 price × count，自动响应数据变化并实时更新显示。
用 computed 实现购物车金额自动汇总，核心就一条：把“所有商品单价 × 数量”的总和，声明为一个计算属性，Vue 会自动追踪它依赖的数据（比如商品列表、每个商品的 price 和 count），一旦任一数据变化，总金额实时更新——不用手动调用函数，也不用 watch 监听。
准备基础购物车数据结构
确保你的 data 中有清晰的商品数组，每项至少包含 price（单价）和 count（数量）字段：
示例：v-model="cartItems" 数据格式：<br>[<br> { id: 1, name: "苹果", price: 5.5, count: 2 },<br> { id: 2, name: "牛奶", price: 12.0, count: 1 },<br> { id: 3, name: "面包", price: 8.5, count: 3 }<br>]
在 computed 中写汇总逻辑
直接在 Vue 组件的 computed 选项里定义一个叫 totalPrice 的属性：
- 用
reduce遍历 cartItems，对每一项计算item.price * item.count，累加求和 - 注意处理空值：给 price 和 count 加默认值（如
item.price || 0），避免 NaN - 结果建议保留两位小数（用
toFixed(2)），再转回 number 类型（+前缀）或保持字符串显示
computed: {<br> totalPrice() {<br> return this.cartItems.reduce((sum, item) => {<br> const price = parseFloat(item.price) || 0;<br> const count = parseInt(item.count) || 0;<br> return sum + price * count;<br> }, 0).toFixed(2);<br> }<br>}
模板中直接使用，实时响应
在 HTML 模板里像普通数据一样绑定即可，无需加括号：
-
{{ totalPrice }}—— 显示如 47.50 - 修改任一商品的
count（比如通过 input 输入框绑定 v-model），totalPrice 立刻重新计算 - 添加/删除商品、清空 cartItems 数组，同样自动更新
进阶提示（可选但实用）
- 如果价格含单位（如 "¥12.00"），先用正则提取数字：
parseFloat(item.price.toString().match(/[\d.]+/)[0]) || 0 - 想区分“小计”和“实付”（含运费），可再写一个
finalPrice计算属性，基于totalPrice加上shippingFee - 避免在 computed 中做异步或副作用操作（如发请求、改 DOM），它只负责“算”，不负责“做”
