产品规格处理

20 阅读1分钟

工作中遇到特此记录下
数据结构

	a: {机身颜色: ["幻夜黑", "深海蓝", "星河银"], 内存: ["6GB", "8GB"], 机身存储: ["128GB"]}
	indexes = ownSpec: {机身颜色: "幻夜黑", 内存: "6GB", 机身存储: "128GB"}

html

	<view class="margin_top3" v-for="(item,key) in 	a" :key="key">
		<view class="font_size26">{{key}}</view>
			<view class="" style="margin-left: -20upx;">
				<view @click="tabCCCC(key,chainditem)" v-for="(chainditem,chKey) in item" :key="chKey" class="moudel_item" :style=" chainditem != indexes[key] ? 'backgroundColor:#F4F4F4;color:#666666':''">{{chainditem}}</view>
			</view>
		</view>

方法

tabCCCC(one, two) {
	indexes[one] = two;
	let index = Object.values(this.indexes).join("_");
	console.log(index)
}

效果

在这里插入图片描述