vue3使用监听器计算商品总价

在Vue3中，你可以使用计算属性来监听数据的变化，并计算商品的总价。以下是一个简单的实例：

<template>
  <div>
    <div v-for="(item, index) in items" :key="index">
      <input type="number" v-model="item.price" @change="updateTotal" />
      <input type="number" v-model="item.quantity" @change="updateTotal" />
    </div>
    <div>Total: {{ total }}</div>
  </div>
</template>

<script>
import { ref, computed } from 'vue';

export default {
  setup() {
    const items = ref([
      { price: 10, quantity: 2 },
      { price: 5, quantity: 5 }
    ]);

    const total = computed(() => {
      let sum = 0;
      items.value.forEach(item => {
        sum += item.price * item.quantity;
      });
      return sum;
    });

    function updateTotal() {
      // nothing to do here, just trigger computed property
    }

    return {
      items,
      total,
      updateTotal
    }
  }
}
</script>

在上面的示例中，我们使用了Vue3的 `ref` 和 `computed` 函数来创建响应式数据和计算属性。我们通过 `ref` 创建了一个items数组，并将其绑定到模板中的商品列表中。我们还使用 `computed` 创建了一个名为total的计算属性，该属性计算所有商品的总价。

当商品列表中的任何商品的价格或数量发生变化时，我们调用 `updateTotal` 函数。这个函数不做任何事情，只是触发 `total` 计算属性的重新计算，从而更新总价。

最后，在模板中，我们使用双向绑定来绑定每个商品的价格和数量，并将 `total` 展示在页面上。

这是一个简单的例子，你可以根据自己的需求进行修改和扩展。