vue watch购物车计算总价代码

很高兴回答你的问题。以下是一个简单的 Vue watch 购物车计算总价的代码示例：

<template>
  <div>
    <ul>
      <li v-for="(item, index) in cartItems" :key="index">
        {{ item.name }} - {{ item.price }}元 - 数量: {{ item.quantity }}
      </li>
    </ul>
    <p>总价: {{ totalPrice }}元</p>
  </div>
</template>

<script>
export default {
  data() {
    return {
      cartItems: [
        { name: '商品1', price: 10, quantity: 2 },
        { name: '商品2', price: 20, quantity: 1 },
        { name: '商品3', price: 30, quantity: 3 }
      ],
      totalPrice: 
    }
  },
  watch: {
    cartItems: {
      handler: function(newVal, oldVal) {
        this.totalPrice = newVal.reduce((acc, item) => acc + item.price * item.quantity, )
      },
      deep: true
    }
  }
}
</script>

这个代码示例中，我们使用了 Vue 的 watch 功能来监听购物车中商品数量的变化，当购物车中的商品数量发生变化时，我们会重新计算总价并更新视图。