Vue計(jì)算屬性中reduce方法實(shí)現(xiàn)遍歷方式
更新時間：2023年03月29日 10:30:05 作者：宏輝
這篇文章主要介紹了Vue計(jì)算屬性中reduce方法實(shí)現(xiàn)遍歷方式，具有很好的參考價值，希望對大家有所幫助。如有錯誤或未考慮完全的地方，望不吝賜教
vue計(jì)算屬性reduce方法實(shí)現(xiàn)遍歷
在前端頁面中要實(shí)現(xiàn)一個商品購物車的遍歷來計(jì)算出總價格，很多小伙伴都會想到用循環(huán)，可是這樣編寫的代碼語句過于臃腫
下面我們來學(xué)習(xí)一下reduce方法實(shí)現(xiàn)遍歷計(jì)算出商品總價格
未登錄購物車：選中商品
在頁面中，每個購物車商品左側(cè)，都有一個復(fù)選框，用戶可以選擇部分商品進(jìn)行下單，而不一定是全部：
我們定義一個selected變量，記錄所有被選中的商品：
選中一個
我們給商品前面的復(fù)選框與selected綁定，并且指定其值為當(dāng)前購物車商品：
初始化全選
我們在加載完成購物車查詢后，初始化全選：
計(jì)算總價格（使用reduce方法）
然后編寫一個計(jì)算屬性，計(jì)算出選中商品總價格：
computed:{
//計(jì)算總價格
//數(shù)組的reduce()方法：
/**
* 參數(shù)一： 一個函數(shù)（使用箭頭函數(shù)）代表運(yùn)算邏輯
* 函數(shù)的兩個參數(shù)
* c1: 用于存儲累計(jì)的結(jié)果
* c2: 當(dāng)前需要運(yùn)算的元素
* 參數(shù)二： 默認(rèn)值
*/
totalPrice(){
return this.selected.reduce((c1,c2)=>c1+c2.price*c2.num,0);
}
},
在頁面中展示總價格：
效果：
總結(jié)
以上為個人經(jīng)驗(yàn)，希望能給大家一個參考，也希望大家多多支持腳本之家。
相關(guān)文章
Vue-cli項(xiàng)目獲取本地json文件數(shù)據(jù)的實(shí)例
下面小編就為大家分享一篇Vue-cli項(xiàng)目獲取本地json文件數(shù)據(jù)的實(shí)例，具有很好的參考價值，希望對大家有所幫助。一起跟隨小編過來看看吧2018-03-03
這篇文章主要介紹了VueCli3.0中集成MockApi的方法示例，文中通過示例代碼介紹的非常詳細(xì)，對大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價值，需要的朋友們下面隨著小編來一起學(xué)習(xí)學(xué)習(xí)吧2019-07-07
這篇文章主要介紹了解決vue-router 嵌套路由沒反應(yīng)的問題，具有很好的參考價值，希望對大家有所幫助。一起跟隨小編過來看看吧2020-09-09
基于vue.js路由參數(shù)的實(shí)例講解——簡單易懂
下面小編就為大家?guī)硪黄趘ue.js路由參數(shù)的實(shí)例講解——簡單易懂。小編覺得挺不錯的，現(xiàn)在就分享給大家，也給大家做個參考。一起跟隨小編過來看看吧2017-09-09
Vue3 組合式函數(shù)Composable最佳實(shí)戰(zhàn)
這篇文章主要為大家介紹了Vue3 組合式函數(shù)Composable最佳實(shí)戰(zhàn)詳解，有需要的朋友可以借鑒參考下，希望能夠有所幫助，祝大家多多進(jìn)步，早日升職加薪2023-06-06
VUE DEMO之模擬登錄個人中心頁面之間數(shù)據(jù)傳值實(shí)例
今天小編就為大家分享一篇VUE DEMO之模擬登錄個人中心頁面之間數(shù)據(jù)傳值實(shí)例，具有很好的參考價值，希望對大家有所幫助。一起跟隨小編過來看看吧2019-10-10
這篇文章主要為大家詳細(xì)介紹了基于Vue.js實(shí)現(xiàn)簡單搜索框，文中示例代碼介紹的非常詳細(xì)，具有一定的參考價值，感興趣的小伙伴們可以參考一下2016-11-11
這篇文章主要介紹了Vue首屏白屏問題的原因和解決方法講解，Vue首屏白屏問題是指在頁面初次加載時，部分或全部內(nèi)容無法正常顯示，出現(xiàn)空白的情況。其原因可能是因?yàn)轫撁驿秩舅俣冗^慢，或者是因?yàn)榫W(wǎng)絡(luò)請求等問題導(dǎo)致數(shù)據(jù)無法及時加載2023-05-05
Vue 2.5 Level E 已發(fā)布，在原來2.x的基礎(chǔ)上做了很多相應(yīng)改進(jìn)和對 bug 的修復(fù)，目前 2.5 系列最新的版本為 2.5.2，本文給大家介紹vue 2.5 新特征，需要的朋友參考下吧2017-10-10
這篇文章主要介紹了Vue3設(shè)置Proxy代理解決跨域問題，具有很好的參考價值，希望對大家有所幫助。如有錯誤或未考慮完全的地方，望不吝賜教2022-05-05