vue實(shí)現(xiàn)商品規(guī)格選擇功能
更新時(shí)間：2022年04月13日 14:28:58 作者：我是來(lái)寫(xiě)bug的吧
這篇文章主要為大家詳細(xì)介紹了vue實(shí)現(xiàn)商品規(guī)格選擇，文中示例代碼介紹的非常詳細(xì)，具有一定的參考價(jià)值，感興趣的小伙伴們可以參考一下
本文實(shí)例為大家分享了vue實(shí)現(xiàn)商品規(guī)格選擇的具體代碼，供大家參考，具體內(nèi)容如下
動(dòng)手之前要先確定自己的商品數(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: "藍(lán)色"}],
? ? ? ? ? ? attr_values: ["紅色", "藍(lán)色"],
? ? ? ? ? },
? ? ? ? ],
? ? ? ? sku: [
? ? ? ? ? ? {
? ? ? ? ? ? ? ? sku: "40,紅色",
? ? ? ? ? ? ? ? stock: 100,
? ? ? ? ? ? ? ? price: "4038.08"
? ? ? ? ? ? },
? ? ? ? ? ? {
? ? ? ? ? ? ? ? sku: "50,紅色",
? ? ? ? ? ? ? ? stock: 100,
? ? ? ? ? ? ? ? price: "4038.08"
? ? ? ? ? ? },
? ? ? ? ? ? {
? ? ? ? ? ? ? ? sku: "40,藍(lán)色",
? ? ? ? ? ? ? ? stock: 100,
? ? ? ? ? ? ? ? price: "4038.08"
? ? ? ? ? ? },
? ? ? ? ? ? {
? ? ? ? ? ? ? ? sku: "50,藍(lán)色",
? ? ? ? ? ? ? ? stock: 100,
? ? ? ? ? ? ? ? price: "4038.08"
? ? ? ? ? ? },
? ? ? ? ],
? ? ? ? stock: 326,
? ? ? ? price: "4038.08",
},首先先根據(jù)數(shù)據(jù)結(jié)構(gòu)，將商品信息渲染到頁(yè)面上
<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ò)點(diǎn)擊規(guī)格將規(guī)格字符串在sku數(shù)組里遍歷，找到對(duì)應(yīng)的庫(kù)存；并判斷哪些庫(kù)存為0，如果為0，則選項(xiàng)設(shè)為不可選，首次進(jìn)入頁(yè)面的時(shí)候也需要調(diào)用該方法，將缺貨的規(guī)格也一并設(shè)置為不可選。
以上就是本文的全部?jī)?nèi)容，希望對(duì)大家的學(xué)習(xí)有所幫助，也希望大家多多支持腳本之家。
相關(guān)文章
vue實(shí)現(xiàn)動(dòng)態(tài)添加數(shù)據(jù)滾動(dòng)條自動(dòng)滾動(dòng)到底部的示例代碼
本篇文章主要介紹了vue實(shí)現(xiàn)動(dòng)態(tài)添加數(shù)據(jù)滾動(dòng)條自動(dòng)滾動(dòng)到底部的示例代碼，具有一定的參考價(jià)值，感興趣的小伙伴們可以參考一下2018-07-07
python虛擬環(huán)境 virtualenv的簡(jiǎn)單使用
virtualenv是一個(gè)創(chuàng)建隔絕的Python環(huán)境的工具。這篇文章主要介紹了python虛擬環(huán)境 virtualenv的簡(jiǎn)單使用，本文給大家介紹的非常詳細(xì)，具有一定的參考借鑒價(jià)值,需要的朋友可以參考下2020-01-01
Vue組件設(shè)計(jì)-滾動(dòng)置頂設(shè)計(jì)案例
這篇文章主要介紹了Vue組件設(shè)計(jì)-滾動(dòng)置頂設(shè)計(jì)案例,本文通過(guò)實(shí)例代碼給大家介紹的非常詳細(xì)，對(duì)大家的學(xué)習(xí)或工作具有一定的參考借鑒價(jià)值，需要的朋友可以參考下2023-04-04
詳解vue-element Tree樹(shù)形控件填坑路
這篇文章主要介紹了vue-element Tree樹(shù)形控件填坑路，文中通過(guò)示例代碼介紹的非常詳細(xì)，對(duì)大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價(jià)值，需要的朋友們下面隨著小編來(lái)一起學(xué)習(xí)學(xué)習(xí)吧2019-03-03
@click指令用于監(jiān)聽(tīng)元素的點(diǎn)擊事件,并在觸發(fā)時(shí)執(zhí)行相應(yīng)的處理函數(shù),在Vue3中,事件處理就可以通過(guò)@click指令來(lái)實(shí)現(xiàn),下面我們就來(lái)看看如何在Vue3中處理點(diǎn)擊事件吧2023-08-08
這篇文章主要介紹了Vue中如何引用公共方法和公共組件問(wèn)題，具有很好的參考價(jià)值，希望對(duì)大家有所幫助。如有錯(cuò)誤或未考慮完全的地方，望不吝賜教2023-05-05
vue對(duì)插件(iview,elementui,treeselect)樣式的局部修改方式
這篇文章主要介紹了vue對(duì)插件(iview,elementui,treeselect)樣式的局部修改方式，具有很好的參考價(jià)值，希望對(duì)大家有所幫助。如有錯(cuò)誤或未考慮完全的地方，望不吝賜教2022-07-07
使用Vue.$set()或者Object.assign()修改對(duì)象新增響應(yīng)式屬性的方法
vue代碼中,只要在data對(duì)象里定義的對(duì)象,賦值后,任意一個(gè)屬性值發(fā)生變化，視圖都會(huì)實(shí)時(shí)變化，這篇文章主要介紹了使用Vue.$set()或者Object.assign()修改對(duì)象新增響應(yīng)式屬性,需要的朋友可以參考下2022-12-12
vue項(xiàng)目使用node連接數(shù)據(jù)庫(kù)的方法(前后端分離)
這篇文章主要介紹了vue項(xiàng)目使用node連接數(shù)據(jù)庫(kù)（前后端分離），本文結(jié)合示例代碼給大家介紹的非常詳細(xì)，對(duì)大家的學(xué)習(xí)或工作具有一定的參考借鑒價(jià)值,需要的朋友可以參考下2022-12-12
這篇文章主要介紹了vue部署包可配置后臺(tái)接口地址的相關(guān)知識(shí)，本文給大家介紹的非常詳細(xì)，對(duì)大家的學(xué)習(xí)或工作具有一定的參考借鑒價(jià)值,需要的朋友可以參考下2023-03-03