vue實(shí)現(xiàn)商品加減計(jì)算總價(jià)的實(shí)例代碼
需求是商品只能選一次,有原價(jià)和現(xiàn)價(jià).
大概的效果圖是這樣:
完整代碼在這里,直接復(fù)制就能用:
<!DOCTYPE html> <html lang="zh"> <head> <meta charset="UTF-8"> <title>Document</title> <style type="text/css"> html{ background: rgb(214,175,209); } /*計(jì)算器*/ #app{ text-align: center; margin-top: 8%; position: relative; } .goods_box{ width: 70vw; margin-left:15vw; height: auto; margin-top: 5%; } .goods_box ul{ width: 100%; overflow:auto; } .goods_box ul li{ float: left; width: 23%; height: auto; cursor: pointer; margin: 2% 1%; font-size: 0.6rem; background: #fff; display: flex; align-items: center; align-content: center; padding-bottom: 1%; border-radius: 4px; } .goods_img{ width: 40%; border-radius: 6px; height: auto; margin-left: -4%; margin-top: -4%; box-shadow: 3px 3px 2px rgba(0,0,0,.24); } .price{ margin-left: 6%; text-align: left; } .or_price{ color: rgba(242,58,58,0.8); text-decoration: line-through; } .goods_name{ margin-top: 4%; } .now_and_or{ margin-top: 5%; } .now_price{ font-size: 1rem; } /*計(jì)算結(jié)果的盒子*/ .count_box{ width: 70vw; margin-left:15vw; height: auto; border: 2px dashed rgb(253,234,93); display: flex; align-items: center; padding: 2%; position: relative; } .count_box .goods_img{ width: 100px; height: 100px; margin:0; box-shadow: none; } .count_box ul{ width: 100%; overflow:auto; } .count_box ul li{ float: left; cursor: pointer; font-size: 0.6rem; display: flex; align-items: center; align-content: center; padding-top: 2%; padding-bottom: 1%; border-radius: 4px; } .count_box ul li .price{ text-align: center; } .img_box{ position: relative; } .add{ font-size: 2rem; color:rgb(253,234,93); margin-left: 20px; } .delete{ display: flex; align-items: center; color:rgb(253,234,93); font-size: 34px; position: absolute; top: -25%; right: -9%; cursor: pointer; z-index: 1; } /*計(jì)算結(jié)果*/ .result{ margin-top: 16%; margin-left: -30px; font-size: 1rem; display: flex; align-items: center; text-align: left; background: rgb(214,175,209); } .result_content{ display: block; margin-left: 2rem; } .or_amount{ text-decoration: line-through; line-height: 2rem; } .equal_to{ font-size: 2rem; color:rgb(253,234,93); } .now_amount span{ color:rgb(253,234,93); } .img01{ position: absolute; } .buy{ position: absolute; right: 12px; bottom: 10px; font-size: 0.75rem; } </style> </head> <body> <!-- 商品計(jì)算器 --> <div id="app"> <div class="goods_box"> <ul> <li class="goods" v-for="(item, index) in list" @click="choose(index)"> <img class="goods_img" v-bind:src="item.goods_img"> <div class="price"> <div class="goods_name"> {{item.name}} </div> <div class="now_and_or"> <div class="now">現(xiàn)價(jià):<span class="now_price">{{item.hide_price}}¥</span></div> <div class="or">原價(jià):<span class="or_price">{{item.or_price}}¥</span></div> </div> </div> </li> </ul> </div> <div class="count_box"> <ul> <li v-for="(item, index) in count_list" @click="deleteGoods(index)"> <div class="count_box_item"> <div class="img_box"> <div class="delete">×</div> <img class="goods_img" v-bind:src="item.goods_img"> </div> </div> <div class="add">+</div> </li> <li> <div class="result"> <div class="equal_to">=</div> <div class="result_content"> <div class="or_amount">原價(jià):{{or_amount}}¥</div> <div class="now_amount">現(xiàn)價(jià):<span>{{now_amount}}¥</span></div> </div> </div> </li> </ul> <a class="buy" href="#" rel="external nofollow" >立即購(gòu)買</a> </div> </div> <script src="https://cdn.jsdelivr.net/npm/vue@2.5.17/dist/vue.js"></script> <script type="text/javascript"> var idsArray = []; var or_priceArray = []; var now_priceArray = []; //數(shù)組去重 function removeDuplicatedItem(arr) { for(var i = 0; i < arr.length-1; i++){ for(var j = i+1; j < arr.length; j++){ if(arr[i]==arr[j]){ arr.splice(j,1); j--; } } } return arr; } var app = new Vue({ el:"#app", data:{ // 商品列表 list:[ { goods_img:"http://cdn.w7.cc/images/2018/05/19/mdqzEyVEeqBdK3xKulqskX9ryMMfTbgbU1jMOE7i.jpeg?imageView2/5/w/88/format/png", or_price:"100", now_price:"10", //顯示的價(jià)格 hide_price:"50", name:"很長(zhǎng)很長(zhǎng)的名字" }, { goods_img:"http://cdn.w7.cc/images/2018/05/19/mdqzEyVEeqBdK3xKulqskX9ryMMfTbgbU1jMOE7i.jpeg?imageView2/5/w/88/format/png", or_price:"200", now_price:"20", hide_price:"?", name:"很長(zhǎng)很長(zhǎng)的名字" }, { goods_img:"http://cdn.w7.cc/images/2018/05/19/mdqzEyVEeqBdK3xKulqskX9ryMMfTbgbU1jMOE7i.jpeg?imageView2/5/w/88/format/png", or_price:"300", now_price:"30", hide_price:"50", name:"很長(zhǎng)很長(zhǎng)的名字" }, { goods_img:"http://cdn.w7.cc/images/2018/05/19/mdqzEyVEeqBdK3xKulqskX9ryMMfTbgbU1jMOE7i.jpeg?imageView2/5/w/88/format/png", or_price:"100", now_price:"10", hide_price:"50", name:"很長(zhǎng)很長(zhǎng)的名字" }, { goods_img:"http://cdn.w7.cc/images/2018/05/19/mdqzEyVEeqBdK3xKulqskX9ryMMfTbgbU1jMOE7i.jpeg?imageView2/5/w/88/format/png", or_price:"200", now_price:"20", hide_price:"?", name:"很長(zhǎng)很長(zhǎng)的名字" }, { goods_img:"http://cdn.w7.cc/images/2018/05/19/mdqzEyVEeqBdK3xKulqskX9ryMMfTbgbU1jMOE7i.jpeg?imageView2/5/w/88/format/png", or_price:"300", now_price:"30", hide_price:"50", name:"很長(zhǎng)很長(zhǎng)的名字" }, { goods_img:"http://cdn.w7.cc/images/2018/05/19/mdqzEyVEeqBdK3xKulqskX9ryMMfTbgbU1jMOE7i.jpeg?imageView2/5/w/88/format/png", or_price:"100", now_price:"10", hide_price:"50", name:"很長(zhǎng)很長(zhǎng)的名字" }, { goods_img:"http://cdn.w7.cc/images/2018/05/19/mdqzEyVEeqBdK3xKulqskX9ryMMfTbgbU1jMOE7i.jpeg?imageView2/5/w/88/format/png", or_price:"200", now_price:"20", hide_price:"50", name:"很長(zhǎng)很長(zhǎng)的名字" }, { goods_img:"http://cdn.w7.cc/images/2018/05/19/mdqzEyVEeqBdK3xKulqskX9ryMMfTbgbU1jMOE7i.jpeg?imageView2/5/w/88/format/png", or_price:"300", now_price:"30", hide_price:"50", name:"很長(zhǎng)很長(zhǎng)的名字" } ], //動(dòng)態(tài)選擇列表 count_list:[], //原總價(jià) or_amount:0, //現(xiàn)總價(jià) now_amount:0 }, methods:{ choose: function(index){ var arr = this.list; var that = this; //清空數(shù)組 this.count_list = []; this.or_amount = 0; this.now_amount = 0; or_priceArray = []; now_priceArray = []; idsArray.push(index); //數(shù)組去重 removeDuplicatedItem(idsArray); //循環(huán)打印選中商品 for( var i=0;i<idsArray.length;i++){ that.count_list.push(arr[idsArray[i]]); or_priceArray.push(parseInt(arr[idsArray[i]].or_price)); now_priceArray.push(parseInt(arr[idsArray[i]].now_price)); } //循環(huán)計(jì)算價(jià)格 for(var i=0;i<or_priceArray.length;i++){ this.or_amount += or_priceArray[i]; this.now_amount += now_priceArray[i]; } }, //刪除商品 deleteGoods: function(index){ this.or_amount = 0; this.now_amount = 0; this.count_list.splice(index,1); idsArray.splice(index,1); or_priceArray.splice(index,1); now_priceArray.splice(index,1); //循環(huán)計(jì)算價(jià)格 for(var i=0;i<or_priceArray.length;i++){ this.or_amount += or_priceArray[i]; this.now_amount += now_priceArray[i]; } } } }) </script> </body> </html>
總結(jié)
以上所述是小編給大家介紹的vue實(shí)現(xiàn)商品加減計(jì)算總價(jià),希望對(duì)大家有所幫助,如果大家有任何疑問歡迎給我留言,小編會(huì)及時(shí)回復(fù)大家的!
- 詳解Vue demo實(shí)現(xiàn)商品列表的展示
- Vue實(shí)現(xiàn)購(gòu)物車的全選、單選、顯示商品價(jià)格代碼實(shí)例
- Vue實(shí)現(xiàn)商品飛入購(gòu)物車效果(電商項(xiàng)目)
- Vue實(shí)現(xiàn)商品詳情頁的評(píng)價(jià)列表功能
- Vue實(shí)現(xiàn)商品分類菜單數(shù)量提示功能
- vue.js購(gòu)物車添加商品組件的方法
- vue實(shí)現(xiàn)簡(jiǎn)單計(jì)算商品價(jià)格
- 基于vue的tab-list類目切換商品列表組件的示例代碼
- vue實(shí)現(xiàn)購(gòu)物車功能(商品分類)
- vue實(shí)現(xiàn)商品規(guī)格選擇功能
相關(guān)文章
vue項(xiàng)目打包上傳github并制作預(yù)覽鏈接(pages)
這篇文章主要介紹了vue項(xiàng)目打包上傳github并制作預(yù)覽鏈接(pages)的相關(guān)資料,需要的朋友可以參考下2019-04-04vite+vue3+tsx項(xiàng)目打包后動(dòng)態(tài)路由無法加載頁面的問題及解決
這篇文章主要介紹了vite+vue3+tsx項(xiàng)目打包后動(dòng)態(tài)路由無法加載頁面的問題及解決,具有很好的參考價(jià)值,希望對(duì)大家有所幫助,如有錯(cuò)誤或未考慮完全的地方,望不吝賜教2024-03-03vue3?keep-alive實(shí)現(xiàn)tab頁面緩存功能
如何在我們切換tab標(biāo)簽的時(shí)候,緩存標(biāo)簽最后操作的內(nèi)容,簡(jiǎn)單來說就是每個(gè)標(biāo)簽頁中設(shè)置的比如搜索條件及結(jié)果、分頁、新增、編輯等數(shù)據(jù)在切換回來的時(shí)候還能保持原樣,這篇文章介紹vue3?keep-alive實(shí)現(xiàn)tab頁面緩存功能,感興趣的朋友一起看看吧2023-04-04VUE如何實(shí)現(xiàn)點(diǎn)擊文字添加顏色(動(dòng)態(tài)修改class)
這篇文章主要介紹了VUE如何實(shí)現(xiàn)點(diǎn)擊文字添加顏色(動(dòng)態(tài)修改class),具有很好的參考價(jià)值,希望對(duì)大家有所幫助,如有錯(cuò)誤或未考慮完全的地方,望不吝賜教2023-11-11element-ui重置resetFields()不生效的解決
本文主要介紹了element-ui重置resetFields()不生效的解決,文中通過示例代碼介紹的非常詳細(xì),對(duì)大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價(jià)值,需要的朋友們下面隨著小編來一起學(xué)習(xí)學(xué)習(xí)吧2023-12-12淺談vue中關(guān)于checkbox數(shù)據(jù)綁定v-model指令的個(gè)人理解
這篇文章主要介紹了淺談vue中關(guān)于checkbox數(shù)據(jù)綁定v-model指令的個(gè)人理解,v-model用于表單的數(shù)據(jù)綁定很常見,下面就來詳細(xì)的介紹一下2018-11-11