当前位置：首页 > VUE

vue实现规格选择

2026-01-17 21:22:08VUE

Vue 实现规格选择功能

数据驱动渲染规格选项

使用 Vue 的响应式特性管理规格数据，通过 v-for 循环渲染选项。数据结构建议采用嵌套形式：

data() {
  return {
    specs: [
      {
        name: "颜色",
        options: ["红色", "黑色", "金色"],
        selected: null
      },
      {
        name: "内存",
        options: ["64GB", "128GB", "256GB"],
        selected: null
      }
    ]
  }
}

动态样式绑定

通过 :class 实现选中状态的高亮显示，使用计算属性判断是否可选：

vue实现规格选择

<div v-for="(spec, index) in specs" :key="index">
  <h3>{{ spec.name }}</h3>
  <button 
    v-for="(option, i) in spec.options" 
    :key="i"
    @click="selectSpec(index, i)"
    :class="{ 'active': spec.selected === i }"
  >
    {{ option }}
  </button>
</div>

规格联动逻辑

在 methods 中实现选择逻辑，可加入库存验证：

vue实现规格选择

methods: {
  selectSpec(specIndex, optionIndex) {
    this.specs[specIndex].selected = optionIndex
    this.checkAvailability()
  },
  checkAvailability() {
    // 验证组合库存
  }
}

组合规格显示

使用计算属性显示最终选择的规格组合：

computed: {
  selectedSpecs() {
    return this.specs
      .filter(spec => spec.selected !== null)
      .map(spec => spec.options[spec.selected])
  }
}

禁用不可选规格

通过库存数据动态禁用无货选项：

isDisabled(specIndex, optionIndex) {
  // 根据库存API返回数据判断
  return !this.availableCombinations.includes(
    `${specIndex}-${optionIndex}`
  )
}

完整组件示例

<template>
  <div class="spec-selector">
    <div v-for="(spec, sIndex) in specs" :key="sIndex">
      <h4>{{ spec.name }}</h4>
      <div class="options">
        <button
          v-for="(option, oIndex) in spec.options"
          :key="oIndex"
          @click="selectSpec(sIndex, oIndex)"
          :class="{
            'active': spec.selected === oIndex,
            'disabled': isDisabled(sIndex, oIndex)
          }"
          :disabled="isDisabled(sIndex, oIndex)"
        >
          {{ option }}
        </button>
      </div>
    </div>
    <div v-if="selectedSpecs.length" class="result">
      已选择：{{ selectedSpecs.join(' + ') }}
    </div>
  </div>
</template>