vuejs用computed怎么实现购物车满减功能

在Vue.js中使用computed可以方便地实现购物车的满减功能。假设你的购物车数据保存在一个数组中，每个元素包含商品的名称、价格和数量等信息。你可以定义一个computed属性来计算购物车的总价，并在其中实现满减逻辑。具体实现步骤如下：

1. 定义一个computed属性来计算购物车的总价，可以使用reduce方法来实现：

computed: {
  totalPrice() {
    return this.cart.reduce((total, item) => {
      return total + item.price * item.quantity
    }, 0)
  }
}

2. 在computed属性中添加满减逻辑，根据购物车的总价来判断是否满足满减条件，如果满足则减去相应的金额：

computed: {
  totalPrice() {
    let totalPrice = this.cart.reduce((total, item) => {
      return total + item.price * item.quantity
    }, 0)
    if (totalPrice >= 100) {
      totalPrice -= 20
    }
    return totalPrice
  }
}

在上面的例子中，如果购物车的总价大于等于100元，则减去20元。

3. 在模板中使用computed属性来显示购物车的总价，例如：

<div>购物车总价：{{ totalPrice }}</div>

这样就可以实现购物车的满减功能了。当购物车的商品总价满足满减条件时，computed属性会自动重新计算并更新视图。