uniapp 多规格商品发布页面开发教程：小米手机为例

<template>
  <div>
    <div class='specifications'>
      <div class='specification'>
        <div class='specification-title'>型号</div>
        <div class='specification-content'>
          <div
            v-for='(model, index) in models'
            :key='index'
            :class='{ 'specification-item-active': selectedModel === model }'
            class='specification-item'
            @click='selectModel(model)'
          >
            {{ model }}
          </div>
        </div>
      </div>
      <div class='specification'>
        <div class='specification-title'>颜色</div>
        <div class='specification-content'>
          <div
            v-for='(color, index) in colors'
            :key='index'
            :class='{ 'specification-item-active': selectedColor === color }'
            class='specification-item'
            @click='selectColor(color)'
          >
            {{ color }}
          </div>
        </div>
      </div>
    </div>
    <div class='product-info'>{{ selectedModel }} {{ selectedColor }}</div>
  </div>
</template>
<script>
export default {
  data() {
    return {
      models: ['8+256', '12+256'],
      colors: ['黑色', '紫色'],
      selectedModel: '8+256',
      selectedColor: '黑色'
    }
  },
  methods: {
    selectModel(model) {
      this.selectedModel = model
    },
    selectColor(color) {
      this.selectedColor = color
    }
  }
}
</script>
<style scoped>
.specifications {
  display: flex;
  flex-direction: row;
  margin-bottom: 20px;
}
.specification {
  display: flex;
  flex-direction: column;
  margin-right: 20px;
}
.specification-title {
  font-size: 16px;
  margin-bottom: 10px;
}
.specification-content {
  display: flex;
  flex-direction: row;
}
.specification-item {
  font-size: 14px;
  padding: 10px 20px;
  border: 1px solid #ccc;
  cursor: pointer;
}
.specification-item-active {
  background-color: #ccc;
}
.product-info {
  font-size: 18px;
  font-weight: bold;
}
</style>