vue實(shí)現(xiàn)商品規(guī)格選擇功能
更新時(shí)間：2022年04月13日 14:28:58 作者：我是來寫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)，將商品信息渲染到頁面上
<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>然后通過點(diǎn)擊規(guī)格將規(guī)格字符串在sku數(shù)組里遍歷，找到對應(yīng)的庫存；并判斷哪些庫存為0，如果為0，則選項(xiàng)設(shè)為不可選，首次進(jìn)入頁面的時(shí)候也需要調(diào)用該方法，將缺貨的規(guī)格也一并設(shè)置為不可選。
以上就是本文的全部內(nèi)容，希望對大家的學(xué)習(xí)有所幫助，也希望大家多多支持腳本之家。
相關(guān)文章
vue-video-player 斷點(diǎn)續(xù)播的實(shí)現(xiàn)
這篇文章主要介紹了vue-video-player 斷點(diǎn)續(xù)播的實(shí)現(xiàn),本文給大家介紹的非常詳細(xì)，對大家的學(xué)習(xí)或工作具有一定的參考借鑒價(jià)值，需要的朋友可以參考下2021-02-02
vue-router是Vue.js官方的路由插件,它和vue.js是深度集成的,適合用于構(gòu)建單頁面應(yīng)用,下面這篇文章主要給大家介紹了關(guān)于vue中vue-router安裝與配置方法的相關(guān)資料,需要的朋友可以參考下2022-12-12
vue中promise的使用及異步請求數(shù)據(jù)的方法
這篇文章主要介紹了vue中promise的使用及異步請求數(shù)據(jù)的方法,文章給大家較詳細(xì)的介紹了遇到的問題及解決方法，需要的朋友可以參考下2018-11-11
Vue 重置data的數(shù)據(jù)為初始狀態(tài)操作
這篇文章主要介紹了Vue 重置data的數(shù)據(jù)為初始狀態(tài)操作方案，具有很好的參考價(jià)值，希望對大家有所幫助。一起跟隨小編過來看看吧2021-03-03
Vue2+element-ui實(shí)現(xiàn)面包屑導(dǎo)航
這篇文章主要為大家詳細(xì)介紹了Vue2+element-ui使用面包屑導(dǎo)航的正確姿勢，文中示例代碼介紹的非常詳細(xì)，具有一定的參考價(jià)值，感興趣的小伙伴們可以參考一下2022-04-04
VUE 配置vue-devtools調(diào)試工具及安裝方法
vue-devtools是一款基于chrome瀏覽器的插件，用于vue應(yīng)用的調(diào)試，這款vue調(diào)試神器可以極大地提高我們的調(diào)試效率。幫助我們快速的調(diào)試開發(fā)vue應(yīng)用。這篇文章主要介紹了VUE 配置vue-devtools調(diào)試工具及安裝步驟 ,需要的朋友可以參考下2018-09-09
vue踩坑記錄之echarts動(dòng)態(tài)數(shù)據(jù)刷新問題
這篇文章主要介紹了vue踩坑記錄之echarts動(dòng)態(tài)數(shù)據(jù)刷新問題，具有很好的參考價(jià)值，希望對大家有所幫助。如有錯(cuò)誤或未考慮完全的地方，望不吝賜教2023-07-07
這篇文章主要為大家詳細(xì)介紹了vue實(shí)現(xiàn)搜索小功能，文中示例代碼介紹的非常詳細(xì)，具有一定的參考價(jià)值，感興趣的小伙伴們可以參考一下2021-11-11
關(guān)于Vue在ie10下空白頁的debug小結(jié)
這篇文章主要給大家介紹了關(guān)于Vue在ie10下空白頁的debug相關(guān)資料，這是最近在工作中遇到的一個(gè)問題，通過查找相關(guān)的資料終于解決了，文中通過示例代碼介紹的非常詳細(xì)，需要的朋友可以參考下2018-05-05
vue-router實(shí)現(xiàn)組件間的跳轉(zhuǎn)（參數(shù)傳遞）
這篇文章主要為大家詳細(xì)介紹了vue-router實(shí)現(xiàn)組件間的跳轉(zhuǎn)，參數(shù)傳遞方法，具有一定的參考價(jià)值，感興趣的小伙伴們可以參考一下2017-11-11