本文实例为大家分享了Vue实现商品规格选择的具体代码，供大家参考，具体内容如下 动手之前要先确定自己的商品数据结构，下面是我的商品数据结构 datainfo: {
本文实例为大家分享了Vue实现商品规格选择的具体代码，供大家参考，具体内容如下
动手之前要先确定自己的商品数据结构，下面是我的商品数据结构
datainfo: {
attr: [
{
attr_name: "码数",
attr_value: [{attr: "40"}, {attr: "50"}],
attr_values: ["40", "50"],
},
{
attr_name: "颜色",
attr_value: [{attr: "红色"}, {attr: "蓝色"}],
attr_values: ["红色", "蓝色"],
},
],
sku: [
{
sku: "40,红色",
stock: 100,
price: "4038.08"
},
{
sku: "50,红色",
stock: 100,
price: "4038.08"
},
{
sku: "40,蓝色",
stock: 100,
price: "4038.08"
},
{
sku: "50,蓝色",
stock: 100,
price: "4038.08"
},
],
stock: 326,
price: "4038.08",
},首先先根据数据结构，将商品信息渲染到页面上
<div
class="product-delcom"
v-for="(ProductItem, n) in dataInfo.attr"
:key="n"
>
<p>{{ ProductItem.attr_name }}</p>
<ul class="product-footerlist clearfix">
<li
v-for="(oItem, index) in ProductItem.attr_value"
:key="index"
@click="specificationBtn(oItem.attr, n, $event, index)"
:class="[
oItem.isshow ? '' : 'noneActive',
subIndex[n] == index ? 'productActive' : '',
]"
>
{{ oItem.attr }}
</li>
</ul>
</div>然后通过点击规格将规格字符串在sku数组里遍历，找到对应的库存；并判断哪些库存为0，如果为0，则选项设为不可选，首次进入页面的时候也需要调用该方法，将缺货的规格也一并设置为不可选。
--结束END--
本文标题: vue实现商品规格选择功能
本文链接: https://www.lsjlt.com/news/145853.html(转载时请注明来源链接)
有问题或投稿请发送至: 邮箱/279061341@qq.com QQ/279061341
下载Word文档到电脑，方便收藏和打印～
2024-01-12
2023-05-20
2023-05-20
2023-05-20
2023-05-20
2023-05-20
2023-05-20
2023-05-20
2023-05-20
2023-05-20
回答
回答
回答
回答
回答
回答
回答
回答
回答
回答
官方手机版
微信公众号
商务合作
0