购物车小计

1、html 部分

<div id="app" class="cart_box"> <ul class="cart_top"> <li class="cart_top_item" v-for="(item,i) in dataList" v-bind:key="item.id"> <div class="item_left"> <p class="cursor_pointer" @click="handle('minus',i)">- id: 1, price: 60.32, count: 0 }, { id: 2, price: 50.26, count: 0 }, { id: 3, price: 40.33, count: 0 }, { id: 4, price: 30.02, count: 0 }, { id: 5, price: 20.03, count: 0 }, { id: 6, price: 10.99, count: 0 }, { id: 7, price: 12.95, count: 0 } ]; new Vue({ el: '#app', data: { dataList: sourceData }, methods: { computedTotal(count, price) { return (count * price).toFixed(2) + '元'; }, handle(type, i) { let data = this.dataList[i]; if (type == 'minus') { data.count--; data.count <= 0 ? data.count = 0 : null; } else if (type == 'puls') { data.count++; data.count >= 10 ? data.count = 10 : null; } } }, computed: { // 总数 total() { // 第一种方法 // let total = 0; // this.dataList.forEach(item => { //     total += item.count; // }); // return total; // 第二种方法 return this.dataList.reduce((accumulator, item) => { return accumulator + item.count; }, 0); }, // 总价 totalPrice() { return this.dataList.reduce((accumulator, item) => { return accumulator + item.count * item.price; }, 0); }, // 最大单价 maxPrice() { let arr = this.dataList.filter(item => { return item.count >= 1; }).map(item => { return item.price; }); return arr.length == 0 ? 0 : Math.max(...arr); } } }); 

3、css 部分

ul,
li { margin: 0; padding: 0; list-style: none; } .cart_box { width: 600px; margin-top: 60px; position: absolute; top: 50%; left: 50%; transform: translate(-50%, -50%); } .cart_top { background-color: #555555; border-radius: 10px 10px 0 0; padding: 5px 20px; box-sizing: border-box; } .cart_top_item { margin: 20px 0; display: flex; justify-content: space-around; align-items: center; } .item_left { flex: 2; display: flex; justify-content: space-between; align-items: center; } .cursor_pointer { cursor: pointer; background-color: #333333; font-size: 32px; font-weight: 600; color: #FFFFFF; } .counts { background-color: #FFFFFF; margin: 0 16px; font-size: 22px; } .item_left>p { width: 50px; height: 32px; line-height: 32px; margin-top: 0; margin-bottom: 0; text-align: center; border-radius: 5px; } .item_right { flex: 6; height: 32px; line-height: 32px; margin-left: 36px; background-color: #222222; color: #888888; padding: 0 16px; box-sizing: border-box; } .item_right>strong:first-child { margin-right: 12px; } .cart_bottom { background-color: #333333; border-radius: 0 0 10px 10px; color: #a88a8a; padding: 16px 20px; box-sizing: border-box; font-size: 14px; } .cart_bottom>span>em { background-color: #EEEEEE; padding: 6px 10px; box-sizing: border-box; color: #333333; font-size: 16px; } 

4、演示