vue实现商品规格选择功能

这篇文章主要为大家详细介绍了vue实现商品规格选择，文中示例代码介绍的非常详细，具有一定的参考价值，感兴趣的小伙伴们可以参考一下

本文实例为大家分享了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，则选项设为不可选，首次进入页面的时候也需要调用该方法，将缺货的规格也一并设置为不可选。

以上就是本文的全部内容，希望对大家的学习有所帮助，也希望大家多多支持北冥有鱼。

您可能感兴趣的文章:

• vue实现商品多选功能
• vue实现商品购物车全选反选
• vue实现商品详情页功能之商品选项卡
• vue商城中商品“筛选器”功能的实现代码
• Vue+Node实现商品列表的分页、排序、筛选，添加购物车功能详解
• Vue实现购物车的全选、单选、显示商品价格代码实例
• vue实现选择商品规格功能