使用vue实现sku选择

使用 Vue 实现 sku 选择需要以下步骤：

1. 建立 Vue 实例，并在 template 中定义展示商品 sku 的组件，通常是一个表格或者列表。

2. 在 data 中定义一个变量用来存储当前选择的 sku，并初始化为一个空对象。

3. 在 template 中使用 v-for 循环渲染每一个 sku 选项，并使用 v-bind 指令绑定点击事件，点击时更新当前选择的 sku。

4. 在点击事件处理函数中，根据用户选择的 sku 更新当前选择的 sku 变量，并通过计算属性或者方法获取对应的 sku 信息。

例如，以下是一个简单的 sku 选择组件的示例：

<template>
  <div class="sku-selector">
    <table>
      <tr v-for="(option, optionName) in skuOptions" :key="optionName">
        <td>{{ optionName }}</td>
        <td>
          <button v-for="value in option.values" :key="value" @click="selectSku(optionName, value)">
            {{ value }}
          </button>
        </td>
      </tr>
    </table>
    <div>当前选择：{{ selectedSku }}</div>
  </div>
</template>

<script>
export default {
  data() {
    return {
      selectedSku: {},
      skuOptions: {
        color: {
          values: ['红色', '黄色', '蓝色']
        },
        size: {
          values: ['XS', 'S', 'M', 'L', 'XL']
        }
      }
    }
  },
  methods: {
    selectSku(optionName, value) {
      this.selectedSku[optionName] = value
    }
  },
  computed: {
    currentSku() {
      // 根据当前选择的