vue动态添加商品多规格

您可以通过以下步骤来实现vue动态添加商品多规格：

1. 在数据中定义一个数组，用于存储商品规格信息，例如：

data() {
  return {
    specs: [
      {
        name: '颜色',
        values: ['红色', '蓝色', '绿色']
      },
      {
        name: '尺码',
        values: ['S', 'M', 'L']
      }
    ]
  }
}

2. 在页面中使用v-for指令循环渲染规格信息，例如：

<div v-for="(spec, index) in specs" :key="index">
  <div>{{ spec.name }}</div>
  <div>
    <span v-for="(value, i) in spec.values" :key="i">{{ value }}</span>
  </div>
</div>

3. 在页面中添加一个按钮，用于添加新的规格信息，例如：

<button @click="addSpec">添加规格</button>

4. 在methods中定义addSpec方法，用于向规格数组中添加新的规格信息，例如：

methods: {
  addSpec() {
    this.specs.push({
      name: '',
      values: []
    })
  }
}

5. 在页面中添加一个按钮，用于删除规格信息，例如：

<button @click="removeSpec(index)">删除规格</button>

6. 在methods中定义removeSpec方法，用于从规格数组中删除指定的规格信息，例如：

methods: {
  removeSpec(index) {
    this.specs.splice(index, 1)
  }
}