vue實現(xiàn)商品規(guī)格選擇功能

更新時間：2022年04月13日 14:28:58 作者：我是來寫bug的吧

這篇文章主要為大家詳細介紹了vue實現(xiàn)商品規(guī)格選擇，文中示例代碼介紹的非常詳細，具有一定的參考價值，感興趣的小伙伴們可以參考一下

本文實例為大家分享了vue實現(xiàn)商品規(guī)格選擇的具體代碼，供大家參考，具體內(nèi)容如下

動手之前要先確定自己的商品數(shù)據(jù)結(jié)構(gòu)，下面是我的商品數(shù)據(jù)結(jié)構(gòu)

dataInfo: {
? ? ? ? attr: [
? ? ? ? ? {
? ? ? ? ? ? attr_name: "碼數(shù)",
? ? ? ? ? ? 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",
},

首先先根據(jù)數(shù)據(jù)結(jié)構(gòu)，將商品信息渲染到頁面上

<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>

然后通過點擊規(guī)格將規(guī)格字符串在sku數(shù)組里遍歷，找到對應(yīng)的庫存；并判斷哪些庫存為0，如果為0，則選項設(shè)為不可選，首次進入頁面的時候也需要調(diào)用該方法，將缺貨的規(guī)格也一并設(shè)置為不可選。

以上就是本文的全部內(nèi)容，希望對大家的學(xué)習有所幫助，也希望大家多多支持腳本之家。

您可能感興趣的文章: