怎么使用Vue計(jì)算屬性中reduce方法實(shí)現(xiàn)遍歷

今天小編給大家分享一下怎么使用Vue計(jì)算屬性中reduce方法實(shí)現(xiàn)遍歷的相關(guān)知識(shí)點(diǎn)，內(nèi)容詳細(xì)，邏輯清晰，相信大部分人都還太了解這方面的知識(shí)，所以分享這篇文章給大家參考一下，希望大家閱讀完這篇文章后有所收獲，下面我們一起來(lái)了解一下吧。

vue計(jì)算屬性reduce方法實(shí)現(xiàn)遍歷

未登錄購(gòu)物車：選中商品

在頁(yè)面中，每個(gè)購(gòu)物車商品左側(cè)，都有一個(gè)復(fù)選框，用戶可以選擇部分商品進(jìn)行下單，而不一定是全部：

我們定義一個(gè)selected變量，記錄所有被選中的商品：

選中一個(gè)

我們給商品前面的復(fù)選框與selected綁定，并且指定其值為當(dāng)前購(gòu)物車商品：

初始化全選

我們?cè)诩虞d完成購(gòu)物車查詢后，初始化全選：

計(jì)算總價(jià)格（使用reduce方法）

然后編寫一個(gè)計(jì)算屬性，計(jì)算出選中商品總價(jià)格：

computed:{
          //計(jì)算總價(jià)格
          //數(shù)組的reduce()方法：
            /**
             *  參數(shù)一： 一個(gè)函數(shù)（使用箭頭函數(shù)）代表運(yùn)算邏輯
             *       函數(shù)的兩個(gè)參數(shù)
             *               c1: 用于存儲(chǔ)累計(jì)的結(jié)果
             *               c2: 當(dāng)前需要運(yùn)算的元素
             *  參數(shù)二： 默認(rèn)值
             */
          totalPrice(){
              return this.selected.reduce((c1,c2)=>c1+c2.price*c2.num,0);
          }
        },

在頁(yè)面中展示總價(jià)格：

效果：

以上就是“怎么使用Vue計(jì)算屬性中reduce方法實(shí)現(xiàn)遍歷”這篇文章的所有內(nèi)容，感謝各位的閱讀！相信大家閱讀完這篇文章都有很大的收獲，小編每天都會(huì)為大家更新不同的知識(shí)，如果還想學(xué)習(xí)更多的知識(shí)，請(qǐng)關(guān)注億速云行業(yè)資訊頻道。