学习使用vue实现规格选择实例（一）

怎么实现的了?

写规格的逻辑，

1. 定义一个数组把选中的值存储起来。

2. 定义一个对象存储要匹配的数据。

3. 把选中的值与存储的数据进行遍历查找与之匹配的值的库存，若库存为0按钮为灰色不能选择。

selectArr: [], //存放被选中的值

shopItemInfo: {}, //存放要和选中的值进行匹配的数据

subIndex: [], //是否选中 因为不确定是多规格还是但规格，所以这里定义数组来判断

选择第一个规格之后，要判断其它规格的属性库存是否为0。

点击属性的时候，要给点击当前那个属性添加颜色相邻的属性颜色去掉、

v-bind:class=“[oItem.isShow?‘’:‘noneActive’,subIndex[n] == index?‘productActive’:‘’]”

// 点击框变黑

if (self.selectArr[n] != item) { //item是OItem.name => (100, 200)

self.selectArr[n] = item;

self.subIndex[n] = index;

} else {

self.selectArr[n] = “”;

self.subIndex[n] = -1; //去掉选中的颜色

}

多规格的时候，要确定其中的某些值之后才能判断是否有库存，比如我这里，从后台返回的数据结构是，所有的可能性组合都在同一个数组里，数组里包含着所有可能性的对象数据，对象里有库存、组合属性(比如上面的 200,白色)等等值，当点击200的时候，就可以只知道(200,白色)(200,黑色)(200,绿色)的库存情况了。

这里的选中与取消是通过v-bind:class实现的

详细思路分析：

页面上的数据渲染，

第一行直接v-for循环的是simulatedDATA.specifications里面的name（尺寸，颜色）

第二行直接v-for循环的是simulatedDATA.specifications里面的item，循环显示输出到页面

simulatedDATA数据放在data里面就避免了发起请求，

如果需要请求数据，则可以在created里面去请求

修改数据结构格式，改成键值对的方式，以方便和选中之后的值进行匹配，这里输出的是

调用方法checkItem()

把self.simulatedDATA.specifications赋值给option

定义数组result存储被选中的值

self.selectArr[i] 是 OItem.name (100或200)

//如果选中 把self.selectArr[i]赋值给result[i]，循环遍历

循环option

把选中的值存放到字符串last去

点击事件

item是OItem.name (100, 200)

n 是否选中（选中subIndex[n] == index，未选中 subIndex[n] ！= index）

index是索引（0，1，2）

源码：

{{ProductItem.name}}

最后

本人分享一下这次字节跳动、美团、头条等大厂的面试真题涉及到的知识点，以及我个人的学习方法、学习路线等，当然也整理了一些学习文档资料出来是给大家的。知识点涉及比较全面，包括但不限于前端基础，HTML，CSS，JavaScript，Vue，ES6，HTTP，浏览器，算法等等

开源分享：【大厂前端面试题解析+核心总结学习笔记+真实项目实战+最新讲解视频】

前端视频资料：
lass=“productBox”>

{{ProductItem.name}}

最后

本人分享一下这次字节跳动、美团、头条等大厂的面试真题涉及到的知识点，以及我个人的学习方法、学习路线等，当然也整理了一些学习文档资料出来是给大家的。知识点涉及比较全面，包括但不限于前端基础，HTML，CSS，JavaScript，Vue，ES6，HTTP，浏览器，算法等等

开源分享：【大厂前端面试题解析+核心总结学习笔记+真实项目实战+最新讲解视频】

[外链图片转存中…(img-LR33QYtV-1714650955769)]

前端视频资料：