uniapp 写一个多规格的产品发布页面比如小米手机型号8+25612+256颜色:黑色紫色那么就会有小米手机8+256黑色小米手机8+256黑紫色小米手机12+256黑色小米手机12+256紫色这样的代码
<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
原文地址: https://www.cveoy.top/t/topic/hiri 著作权归作者所有。请勿转载和采集!