Vue實戰(zhàn)—商品分類菜單數(shù)量提示（10）

omgdog 發(fā)布于2019-08-26 10:21 / 3502人閱讀

摘要：如上所示，這篇我們將商品分類菜單顯示數(shù)量的提示完善，是軟件更加易于使用。指向了實例完善購物車內(nèi)的數(shù)量統(tǒng)計另需導入總個數(shù)總金額結算按鈕顯示去結算現(xiàn)在商品分類菜單的數(shù)量提示就完成了。

如上所示，這篇我們將商品分類菜單顯示數(shù)量的提示完善，是軟件更加易于使用。

好先讓我回顧一下上節(jié)課的內(nèi)容，Goods組件，數(shù)量提示功能最終需要在Goods組件內(nèi)顯示。

注意methods方法中的calculateCount函數(shù)實現(xiàn)計算個數(shù)，數(shù)量來自于增減組件內(nèi)Cartcontrol。

    calculateCount(spus) {
        console.log(spus)
      let count = 0;
      spus.forEach(food => {
        if (food.count > 0) {
          count += food.count;
        }
      });

      return count;
    },

以上是spus數(shù)據(jù)

Cartcontrol組件控制商品增減

通過組件Cartcontrol接受了來自父組件的傳值，并且我們在組件內(nèi)添加商品的增減功能。

完善購物車內(nèi)的數(shù)量統(tǒng)計

現(xiàn)在商品分類菜單的數(shù)量提示就完成了。

GPU云服務器云服務器商品數(shù)量商品分類獲取商品分類商品分類java

文章版權歸作者所有，未經(jīng)允許請勿轉(zhuǎn)載,若此文章存在違規(guī)行為，您可以聯(lián)系管理員刪除。

轉(zhuǎn)載請注明本文地址：http://specialneedsforspecialkids.com/yun/106025.html

Vue實戰(zhàn)-商品展示切圖（7）

摘要：本篇我們將繼續(xù)推進外賣項目商品頁的展示。如圖所示，我們可以把商品也面分為兩大部分左側菜單欄右側商品展示為當前商品頁面的根元素。下一篇文章我們開始為左側菜單欄，右側商品展示加入數(shù)據(jù)。上次我們通過設計評價組件這個過程，了解到了組件設計中的良好的習慣，比如，文件夾如何支撐組件，圖片，組件路徑的存放于設置。本篇我們將繼續(xù)推進外賣項目—商品頁的展示。 showImg(https://segm...

DirtyMind 2019-08-23 18:15 評論0 收藏0
Vue實戰(zhàn)—商品控件與購物車聯(lián)動（9）

摘要：本篇我們將構建商品控件與購物車聯(lián)動。商品控件商品控件的結構編寫在商品組件的標簽內(nèi)完成項目結構，以及數(shù)據(jù)，事件的綁定，與判斷邏輯的書寫。有商品數(shù)量的時候會按照規(guī)定動畫進行顯示，反之則隱藏。本篇我們將構建商品控件與購物車聯(lián)動。商品控件商品控件的結構編寫showImg(https://segmentfault.com/img/bVbvk8j?w=191&h=439); 在商品組件的標簽...

JayChen 2019-08-26 10:14 評論0 收藏0
Vue實戰(zhàn)-菜單欄，商品展示數(shù)據(jù)交互（8）

摘要：上篇我們將菜單欄，商品展示結構完成，本次我們?yōu)檫@兩個部分接入數(shù)據(jù)。菜單欄接入數(shù)據(jù)導入組件，定義需要的數(shù)據(jù)格式導入滾動組件導入商品頁面準備需要的數(shù)據(jù)初始化組件。上篇我們將菜單欄，商品展示結構完成，本次我們?yōu)檫@兩個部分接入數(shù)據(jù)。 showImg(https://segmentfault.com/img/bVbu2JW?w=312&h=421); 菜單欄接入數(shù)據(jù) 導入組件，定義需要的數(shù)據(jù)格...

chnmagnus 2019-08-23 18:39 評論0 收藏0
Laravel 教程 - 實戰(zhàn) iBrand 開源電商 API 系統(tǒng)

摘要：最佳實踐良好的編碼規(guī)范單元測試持續(xù)集成文檔，從一開始就形成良好的編碼習慣。真實的電商業(yè)務所有的業(yè)務需求來自真實的客戶，并且線上良好運營中。重要通知： Laravel + 小程序的開源電商版本源碼已經(jīng)在 github 上拉，歡迎提交 issue 和 star :) 開源電商 Server 端: Laravel API源碼開源電商 client 端：小程序源碼 iBrand 簡介...

iOS122 2019-06-28 18:26 評論0 收藏0
小愛童鞋@你，一起來擼個小程序吧

摘要：輪播圖區(qū)域這里微信小程序給我們提供了組件，直接用就可以了。但是需要注意的是在微信小程序里，強烈推薦使用彈性布局首頁商品展示區(qū)這里的商品都是分塊展示，很有規(guī)律，因此整個商品展示都可以直接用遍歷出來。 showImg(https://user-gold-cdn.xitu.io/2018/6/11/163ed74a0fff9596?w=1262&h=676&f=jpeg&s=174374);...

MiracleWong 2019-08-29 15:40 評論0 收藏0