<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
uniapp 写一个多规格的产品发布页面比如小米手机型号8+25612+256颜色:黑色紫色那么就会有小米手机8+256黑色小米手机8+256黑紫色小米手机12+256黑色小米手机12+256紫色这样的代码

原文地址: https://www.cveoy.top/t/topic/hiri 著作权归作者所有。请勿转载和采集!

免费AI点我,无需注册和登录