用vue 写一个多sku的案例

好的，下面是一个简单的多SKU案例，使用Vue框架实现：

首先，我们需要定义一个商品对象，包含多个SKU选项以及价格等信息：

{
  id: 1,
  name: '商品名称',
  skuList: [
    {
      id: 101,
      name: '颜色',
      options: [
        { id: 10101, name: '红色' },
        { id: 10102, name: '蓝色' },
        { id: 10103, name: '绿色' }
      ]
    },
    {
      id: 102,
      name: '尺码',
      options: [
        { id: 10201, name: 'S' },
        { id: 10202, name: 'M' },
        { id: 10203, name: 'L' },
        { id: 10204, name: 'XL' }
      ]
    }
  ],
  skuData: [
    {
      skuId: '10101-10201',
      price: 100,
      stock: 10
    },
    {
      skuId: '10101-10202',
      price: 105,
      stock: 5
    },
    {
      skuId: '10101-10203',
      price: 110,
      stock: 3
    },
    {
      skuId: '10101-10204',
      price: 120,
      stock: 0
    },
    {
      skuId: '10102-10201',
      price: 95,
      stock: 8
    },
    {
      skuId: '10102-10202',
      price: 100,
      stock: 2
    },
    {
      skuId: '10102-10203',
      price: 105,
      stock: 0
    },
    {
      skuId: '10102-10204',
      price: 115,
      stock: 6
    },
    {
      skuId: '10103-10201',
      price: 90,
      stock: 4
    },
    {
      skuId: '10103-10202',
      price: 95,
      stock: 0
    },
    {
      skuId: '10103-10203',
      price: 100,
      stock: 6
    },
    {
      skuId: '10103-10204',
      price: 110,
      stock: 3
    }
  ]
}

然后，我们可以在Vue组件中使用v-for指令循环渲染SKU选项：

<template>
  <div>
    <h2>{{ product.name }}</h2>
    <ul>
      <li v-for="sku in product.skuList" :key="sku.id">
        {{ sku.name }}：
        <select v-model="selected[sku.id]">
          <option v-for="option in sku.options" :key="option.id" :value="option.id">
            {{ option.name }}
          </option>
        </select>
      </li>
    </ul>
    <p>价格：{{ price }}</p>
    <p>库存：{{ stock }}</p>
  </div>
</template>

在组件的data选项中，我们定义了一个selected对象，用于保存用户选择的SKU选项。在计算属性中，我们根据用户选择的SKU选项计算出对应的价格和库存：

export default {
  data () {
    return {
      product: {
        // 商品对象
      },
      selected: {
        // 用户选择的SKU选项
      }
    }
  },
  computed: {
    // 计算属性
    skuId () {
      // 根据用户选择的SKU选项计算出对应的skuId
      const ids = []
      for (const sku of this.product.skuList) {
        ids.push(this.selected[sku.id])
      }
      return ids.join('-')
    },
    price () {
      // 根据skuId获取对应的价格
      const sku = this.product.skuData.find(sku => sku.skuId === this.skuId)
      return sku ? sku.price : 0
    },
    stock () {
      // 根据skuId获取对应的库存
      const sku = this.product.skuData.find(sku => sku.skuId === this.skuId)
      return sku ? sku.stock : 0
    }
  }
}

最后，我们可以在模板中显示计算属性的值，实现SKU的选择和价格、库存的实时更新：

<p>价格：{{ price }}</p>
<p>库存：{{ stock }}</p>

完整代码如下：

<template>
  <div>
    <h2>{{ product.name }}</h2>
    <ul>
      <li v-for="sku in product.skuList" :key="sku.id">
        {{ sku.name }}：
        <select v-model="selected[sku.id]">
          <option v-for="option in sku.options" :key="option.id" :value="option.id">
            {{ option.name }}
          </option>
        </select>
      </li>
    </ul>
    <p>价格：{{ price }}</p>
    <p>库存：{{ stock }}</p>
  </div>
</template>

<script>
export default {
  data () {
    return {
      product: {
        id: 1,
        name: '商品名称',
        skuList: [
          {
            id: 101,
            name: '颜色',
            options: [
              { id: 10101, name: '红色' },
              { id: 10102, name: '蓝色' },
              { id: 10103, name: '绿色' }
            ]
          },
          {
            id: 102,
            name: '尺码',
            options: [
              { id: 10201, name: 'S' },
              { id: 10202, name: 'M' },
              { id: 10203, name: 'L' },
              { id: 10204, name: 'XL' }
            ]
          }
        ],
        skuData: [
          {
            skuId: '10101-10201',
            price: 100,
            stock: 10
          },
          {
            skuId: '10101-10202',
            price: 105,
            stock: 5
          },
          {
            skuId: '10101-10203',
            price: 110,
            stock: 3
          },
          {
            skuId: '10101-10204',
            price: 120,
            stock: 0
          },
          {
            skuId: '10102-10201',
            price: 95,
            stock: 8
          },
          {
            skuId: '10102-10202',
            price: 100,
            stock: 2
          },
          {
            skuId: '10102-10203',
            price: 105,
            stock: 0
          },
          {
            skuId: '10102-10204',
            price: 115,
            stock: 6
          },
          {
            skuId: '10103-10201',
            price: 90,
            stock: 4
          },
          {
            skuId: '10103-10202',
            price: 95,
            stock: 0
          },
          {
            skuId: '10103-10203',
            price: 100,
            stock: 6
          },
          {
            skuId: '10103-10204',
            price: 110,
            stock: 3
          }
        ]
      },
      selected: {}
    }
  },
  computed: {
    skuId () {
      const ids = []
      for (const sku of this.product.skuList) {
        ids.push(this.selected[sku.id])
      }
      return ids.join('-')
    },
    price () {
      const sku = this.product.skuData.find(sku => sku.skuId === this.skuId)
      return sku ? sku.price : 0
    },
    stock () {
      const sku = this.product.skuData.find(sku => sku.skuId === this.skuId)
      return sku ? sku.stock : 0
    }
  }
}
</script>