使用vue实现多规格选择实例（SKU）

做过商城项目的小伙伴们，相信大家多多少少都会接触到规格选择这个模块，也就是所说的SKU。

公司最近在做一个下单系统，这里面就涉及到这个SKU，说实话之前我是没有写过这个的，刚开始也是有点迷茫把，不知道该如何下手，因为要考虑到后端那边返回的数据结构、库存、多规格等等问题，然后各种百度，各种搜集资料，才慢慢懂了其中的逻辑，下面我就简单写个demo吧。

首先逻辑得清晰

1. 定义一个数组把选中的值存储起来。
2. 定义一个对象存储要匹配的数据。
3. 把选中的值与存储的数据进行遍历查找与之匹配的值的库存，若库存为0按钮为灰色不能选择。

上代码 秒懂 哈哈

1.html

2.js

3.css

  .wrap-sku {
    .product-box {
      width: 1200px;
      display: block;
      margin: 0 auto;
    }
    .product-content {
      margin-bottom: 100px;
    }
    .product-delcom {
      color: #323232;
      font-size: 26px;
      border-bottom: 1px solid #EEEEEE;
      padding: 30px 0;
    }
    .product-footerlist {
      margin-top: 10px;
    }
    .product-footerlist li {
      border: 1px solid #606060;
      border-radius: 5px;
      color: #606060;
      text-align: center;
      padding: 10px 30px;
      float: left;
      margin-right: 20px;
      cursor: pointer;
    }
    .product-footerlist li.productActive {
      background-color: #1A1A29;
      color: #fff;
      border: 1px solid #1A1A29;
    }
    .product-footerlist li.noneActive {
      background-color: #ccc;
      opacity: 0.4;
      color: #000;
      pointer-events: none;
    }
    .product-footer {
      background-color: #1A1A29;
      text-align: center;
    }
    .product-footer a {
      color: #fff;
      text-decoration: none;
      height: 88px;
      line-height: 88px;
      font-size: 28px;
    }
    .price{
      font-size: 30px;
      height: 60px;
      line-height: 60px;
    }
  }

4.最后当然是上效果图了

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