Vue實現(xiàn)簡易購物車頁面
更新時間:2020年12月30日 10:09:03 作者:小王同學Max
這篇文章主要為大家詳細介紹了Vue實現(xiàn)簡易購物車頁面,文中示例代碼介紹的非常詳細,具有一定的參考價值,感興趣的小伙伴們可以參考一下
VUE實現(xiàn)簡易購物車效果,供大家參考,具體內容如下
簡易的購物車小demo
引用了一下bootstrap3,的表格
<section id="gouwuche"> <table class="table table-hover"> <thead> <tr> <th> <input type="checkbox" @change="handlechange" v-model="isAllChange" @click='inshow()'/> 全選 </th> <th>商品信息</th> <th>單價</th> <th>數(shù)量</th> <th>金額</th> <th>操作</th> </tr> </thead> <tbody> <tr style="height:50px;"></tr> <tr v-for="(date,index) in arr" :class="{bgcolor:isActive}"> <td> <input type="checkbox" v-model="checkgroup" :value="date" @change="handleLiChange" /> <img :src="date.imges"/> {{date.name}} </td> <td> <p>{{date.networkType}}</p> <p>{{date.colorClass}}</p> <p>{{date.packageType}}</p> <p>{{date.rom}}</p> <p>{{date.purchaseMethod}}</p> <br> </td> <td> <p><b class="danjia">{{date.price}}</b></p> </td> <td> <button @click="handleDelclike(date)" >-</button> <input type="text" :value="date.numbers"/> <button @click="date.numbers++">+</button> </td> <td> <p><b class="jiner">{{getSumje(date)}}.00</b></p> </td> <td> <p>移入收藏夾</p> <a href="#" @click="rmove(index)">刪除</a> </td> </tr> </tbody> </table> <div class="box"> <div class="boxa"> <input type="checkbox" @change="handlechange" v-model="isAllChange" @click='inshow()'/> <a href="#" >全選</a> <a href="#" >刪除</a> </div> <div class="boxc"> <p>已選商品:<b class="jiner">{{checkgroup.length}}</b></p> <p>合計(不含運費):<b class="jiner">{{getSum()}}<b></p> </div> <div class="boxb" > 結算 </div> </div> </section>
CSS:
#gouwuche { width: 1200px; height: ; margin: 0 auto; } .box { width: 1200px; height: 50px; margin: 30px auto; display: flex; justify-content: space-between; align-items: center; background-color: #C4E3F3; } .boxa { width: 780px; height: 50px; } .boxa a { margin-right: 50px; } .boxb { width: 120px; height: 50px; background-color: #C0C0C0; display: flex; align-items: center; justify-content: center; color: white; font-size: 18px; } .boxc { width: 300px; height: 50px; display: flex; align-items: center; justify-content: space-between; } input { width: 50px; text-align: center; } img { width: 60px; height: 60px; } a { text-decoration: none; color: #000; } * { font-size: 12px; } p { margin: 0; padding: 0; line-height: 1.9; } .danjia { font-size: 16px; } .jiner { font-size: 18px; color: #FF8C00; } .bgcolor{ background-color: rgba(205,205,205,0.2); }
js:
var gouwuche = new Vue({ el:"#gouwuche", data:{ checkgroup:[], isAllChage:false, isActive:false, arr:[ { //商品名 name:"小米 note8 Pro", //圖片地址 imges:"img/t1.jpg", //顏色分類 colorClass:"機身顏色:冰翡翠", //網絡類型 networkType:"網絡類型:4G+全網通", //套餐類型 packageType:"套餐類型:官方標配", //存儲容量 rom:"存儲容量:6+128GB", //購買方式 purchaseMethod:"官方旗艦店", //單價 price:1299.00, //數(shù)量 numbers:1, //金額 money:1299.00, //索引 id:"1", }, { //商品名 name:"紅米 k30 5G", //圖片地址 imges:"img/t3.jpg", //顏色分類 colorClass:"機身顏色:紫玉幻境", //網絡類型 networkType:"網絡類型:5G+全網通", //套餐類型 packageType:"套餐類型:官方標配", //存儲容量 rom:"存儲容量:8+128GB", //購買方式 purchaseMethod:"官方旗艦店", //單價 price:1499.00, //數(shù)量 numbers:1, //金額 money:1499.00, //索引 id:"2", }, { //商品名 name:"紅米 k30 Pro", //圖片地址 imges:"img/t4.jpg", //顏色分類 colorClass:"機身顏色:象牙白", //網絡類型 networkType:"網絡類型:5G+全網通", //套餐類型 packageType:"套餐類型:官方標配", //存儲容量 rom:"存儲容量:8+256GB", //購買方式 purchaseMethod:"官方旗艦店", //單價 price:3999.00, //數(shù)量 numbers:1, //金額 money:3999.00, //索引 id:"3", }, { //商品名 name:"紅米 k20 Pro", //圖片地址 imges:"img/t4.jpg", //顏色分類 colorClass:"機身顏色:象牙白", //網絡類型 networkType:"網絡類型:5G+全網通", //套餐類型 packageType:"套餐類型:官方標配", //存儲容量 rom:"存儲容量:8+256GB", //購買方式 purchaseMethod:"官方旗艦店", //單價 price:3999.00, //數(shù)量 numbers:1, //金額 money:3999.00, //索引 id:"3", } ], }, methods:{ inshow:function(){ this.isActive = !this.isActive; }, //總額 getSum:function(){ var sum = 0; for(var i in this.checkgroup){ sum += this.checkgroup[i].numbers * this.checkgroup[i].price; } return sum; }, //單品總額 getSumje:function(date){ var sum = date.price; sum *= date.numbers; return sum; }, //判斷全選框 handlechange:function(){ if(this.isAllChange){ this.checkgroup = this.arr; }else{ this.checkgroup = []; } }, //判斷全選框 handleLiChange:function(){ if(this.checkgroup.length !== this.arr.length){ this.isAllChange = false; }else{ this.isAllChange = true; } }, //數(shù)量減1 handleDelclike:function(date){ var numbers = date.numbers--; if(numbers === 1){ date.numbers = 1; } }, //刪除 rmove:function(index){ var that = this; that.arr.splice(index,1); that.checkgroup.splice(index,1); } } })
以上就是本文的全部內容,希望對大家的學習有所幫助,也希望大家多多支持腳本之家。
相關文章
在vue中使用SockJS實現(xiàn)webSocket通信的過程
最近接到一個業(yè)務需求,需要做一個聊天信息的實時展示的界面,下面小編把實現(xiàn)過程記錄下來,對vue中使用SockJS實現(xiàn)webSocket通信的相關知識感興趣的朋友一起看看吧2018-08-08Nginx配置Vue項目,無法按路徑跳轉及刷新404的解決方案
這篇文章主要介紹了Nginx配置Vue項目,無法按路徑跳轉及刷新404的解決方案,具有很好的參考價值,希望對大家有所幫助。如有錯誤或未考慮完全的地方,望不吝賜教2023-06-06vue3組合式api實現(xiàn)v-lazy圖片懶加載的方法實例
vue作為前端主流的3大框架之一,目前在國內有著非常廣泛的應用,下面這篇文章主要給大家介紹了關于vue3組合式api實現(xiàn)v-lazy圖片懶加載的相關資料,需要的朋友可以參考下2022-09-09element-ui 關于獲取select 的label值方法
今天小編就為大家分享一篇element-ui 關于獲取select 的label值方法,具有很好的參考價值,希望對大家有所幫助。一起跟隨小編過來看看吧2018-08-08Vue導出json數(shù)據(jù)到Excel電子表格的示例
本篇主要介紹了Vue導出json數(shù)據(jù)到Excel電子表格的示例,小編覺得挺不錯的,現(xiàn)在分享給大家,也給大家做個參考。一起跟隨小編過來看看吧2017-12-12