用vue3写一个商品多规格页面

好的，下面是一个简单的商品多规格页面示例：

<template>
  <div>
    <h2>{{ product.name }}</h2>
    <p>价格: {{ product.price }}</p>
    <div>
      <h3>选择规格</h3>
      <div v-for="(option, key) in product.options" :key="key">
        <h4>{{ option.name }}</h4>
        <div>
          <button
            v-for="(value, index) in option.values"
            :key="index"
            :class="{ active: selected[key] === value }"
            @click="selectOption(key, value)"
          >
            {{ value }}
          </button>
        </div>
      </div>
    </div>
    <button :disabled="!hasSelected" @click="addToCart">添加到购物车</button>
  </div>
</template>

<script>
export default {
  props: {
    product: {
      type: Object,
      required: true,
    },
  },
  data() {
    return {
      selected: {},
    };
  },
  computed: {
    hasSelected() {
      return Object.keys(this.selected).length === this.product.options.length;
    },
  },
  methods: {
    selectOption(key, value) {
      this.selected = { ...this.selected, [key]: value };
    },
    addToCart() {
      const selectedOptions = Object.values(this.selected);
      console.log(`添加 ${this.product.name} 到购物车，规格为 ${selectedOptions.join(', ')}`);
    },
  },
};
</script>

<style>
.active {
  background-color: #ccc;
}
</style>

解释：

- `props` 接收一个 `product` 对象，包含商品的名称、价格和规格选项。
- `data` 中定义了一个 `selected` 对象，用于存储已选择的规格选项。
- `computed` 中的 `hasSelected` 方法判断是否已选择所有规格选项，用于禁用添加到购物车按钮。
- `methods` 中的 `selectOption` 方法用于更新已选择的规格选项，`addToCart` 方法用于将商品添加到购物车。