使用计算属性实现购物车效果（商品数量增减、单选多选计算金额和总价，）
涉及知识：
Vue 基本指令
Vue 计算属性
使用 Vue 的基础语法知识，包括插值表达式与数据绑定、常用指令、计算属性等实现购物车的数据展示效果。
效果图展示
代码实现
使用v-for循环，实现展示购物车效果
<!DOCTYPE html><html lang="zh-cn"><head><meta charset="UTF-8"><meta name="viewport" content="width=device-width, initial-scale=1.0"><title>购物车</title><link rel="stylesheet" href="css/style.css"><script src="/vue@next"></script></head><body><div id="app"></div><template id="root"><div class="shop-cart"><div class="tabs"><div class="border"><!-- data-*表示自定义属性。 --><div class="title active" data-index="0">全部商品<span class="count">3</span></div><div class="title" data-index="1">降价商品<span class="count">0</span></div><div class="title last" data-index="2">库存紧张<span class="count">0</span></div><div class="line"></div></div></div><div class="lists"><div class="header"><ul class="clearfix"><li><input type="checkbox" class="select-all"><label>全选</label></li><li class="product-info">商品信息</li><li>单价</li><li>数量</li><li>金额</li><li>操作</li></ul></div><!-- 实验需要操作的节点 --><div id="shoplist" class="shoplist"><!-- 店铺内容及样式参考 --><div class="shop" v-for="sName in shopcarts" :key="sName.cartId"><div class="shop-info"><span class="shop-tip">店铺：</span><a class="shop-name" href="#" :key="sName.cartId" >{{sName.shopName}}</a><a href="#" class="wangwang">旺旺</a></div><div class="products" ><div class="item" v-for="shop in sName.products" :key="shop.productId"><div class="select-logo"><!-- --><input type="checkbox" v-bind:checked="shop.isSelect" @click="shop.isSelect=!shop.isSelect"><img :src="shop.topImg" alt="产品logo"></div><div class="product-detail" ><div class="left"><a href="#" class="product-name">{{shop.productName}}</a><div class="logos"><a href="#" class="card">信用卡</a><a href="#" class="service">保障服务</a><a href="#" class="order">订单险</a><a href="#" class="seven">7天无理由</a></div></div><div class="right" v-html="shop.spec"></div></div><div class="price"><p class="market-price">￥{{shop.marketPrice}}</p><p class="real-price">￥{{shop.price}}</p></div><div class="count"><span class="sub" @click="reduce(shop)">-</span><span class="input"><input type="text" :value="shop.count"></span><span class="add" @click="add(shop)">+</span></div><div class="amount">￥{{shop.count*shop.price}}</div><div class="delete"><a href="#">删除</a></div></div></div></div></div></div><div class="operate"><div class="left"><input type="checkbox" class="select-all-footer"><a href="javascript:void(0);">删除</a></div><div class="right"><div>已选择商品<span class="selected-count">{{sumShop}}</span>件</div><div class="amount">合计（不含运费）： <span class="sum">￥{{sumPrice}}</span></div><a href="javascript:void(0);" class="settle">结算</a></div></div></div></template><script src="./js/data.js"></script><script>// 实现头部的动画var titles = document.querySelectorAll('.title')var line = document.querySelector('.line')for (let i = 0; i < titles.length; i++) {titles[i].addEventListener('mouseenter', function() {for (var j = 0; j < titles.length; j++) {titles[j].classList.remove('active')}this.classList.add('active')line.style.left = i * line.offsetWidth + 'px'})}</script></body></html>
存储购物车内，商店和商品的信息数据
var shopcarts = [{// 购物车编号cartId: 1,// 店铺编号 shopId: 2001,// 店铺名称shopName: "荣耀官方旗舰店",products: [{// 商品编号productId: 1001,// 商品名称productName: "【64GB限时优惠100元】华为旗下荣耀Play4T手机新品大电池AI摄影",// 顶层图片topImg: "img/4.jpg",// 商品图片imgs: ["img/1.jpg","img/2.jpg","img/3.jpg","img/4.jpg",],// 是否参加电竞节isActivity: true,// 是否支持信用卡isCard: true,// 是否支持七天退货isSeven: true,// 是否如实描述isRealDesc: true,// 规格spec: `<p>机身颜色：iPhone8 银色4.7英寸</p><p>版本类型：中国大陆</p><p>套餐类型：官方标配</p><p>存储容量：256GB</p>`,marketPrice: 2000,// 单价price: 1199.00,// 购买的数量count: 2,// 金额amount: 2398.00},{// 商品编号productId: 1002,// 商品名称productName: "【6+64GB魅海蓝限时低至1199元】华为旗下荣耀手机荣耀9X麒麟",// 顶层图片topImg: "img/5.jpg",// 商品图片imgs: ["img/1.jpg","img/2.jpg","img/3.jpg","img/4.jpg",],// 是否参加电竞节isActivity: true,// 是否支持信用卡isCard: true,// 是否支持七天退货isSeven: true,// 是否如实描述isRealDesc: true,// 规格spec: `<p>机身颜色：iPhone8 银色4.7英寸</p><p>版本类型：中国大陆</p><p>套餐类型：官方标配</p><p>存储容量：256GB</p>`,marketPrice: 2000,// 单价price: 1199.00,// 购买的数量count: 2,// 金额amount: 2398.00}]},{// 购物车编号cartId: 2,// 店铺编号 shopId: 2002,// 店铺名称shopName: "罗蒙派大星专卖店",products: [{// 商品编号productId: 1003,// 商品名称productName: "罗蒙夏季休闲裤男薄款大码长裤宽松直筒男裤冰丝超薄西裤男士裤子",// 顶层图片topImg: "img/6.jpg",// 商品图片imgs: ["img/1.jpg","img/2.jpg","img/3.jpg","img/4.jpg",],// 是否参加电竞节isActivity: false,// 是否支持信用卡isCard: true,// 是否支持七天退货isSeven: true,// 是否如实描述isRealDesc: true,// 规格spec: "<p>颜色：宝蓝色【5023款】+宝蓝色【5023】</p><p>尺码：28[腰围2尺10]</p>",marketPrice: 200,// 单价price: 168.00,// 购买的数量count: 2,// 金额amount: 336.00}]},{// 购物车编号cartId: 3,// 店铺编号 shopId: ,// 店铺名称shopName: "雅鹿提趣专卖店",products: [{// 商品编号productId: 1004,// 商品名称productName: "雅鹿天丝休闲裤男士夏季薄款商务修身长裤子直筒西裤夏天冰丝男裤",// 顶层图片topImg: "img/7.jpg",// 商品图片imgs: ["img/1.jpg","img/2.jpg","img/3.jpg","img/4.jpg",],// 是否参加电竞节isActivity: false,// 是否支持信用卡isCard: true,// 是否支持七天退货isSeven: true,// 是否如实描述isRealDesc: true,// 规格spec: "<p>颜色：660卡其(单件)</p><p>尺码：29</p>",marketPrice: 200,// 单价price: 118.00,// 购买的数量count: 1,// 金额amount: 118.00}]}]
1、add(shop)商品数量+1
2、reduce(shop)商品数量-1
3、sumShop勾选的商品数量总数
4、sumPrice勾选的商品总价计算
const app = Vue.createApp({template:'#root',data(){return {shopcarts,}},methods:{//商品数量+1add(shop){shop.count++;},//商品数量-1reduce(shop){if(shop.count>0){shop.count--;}},},computed:{sumPrice:function(){let total = 0;for (var i = 0; i < this.shopcarts.length; i++) {for (var j = 0; j < this.shopcarts[i].products.length; j++) {var item = this.shopcarts[i].products[j];// 判断 isSelect 的值，if (item.isSelect == true) {total += item.price * item.count;}}}return total != 0 ? total.toString().replace(/\B(?=(\d{3})+$)/g, ',') : 0;},sumShop:function(){let shopTotal = 0;for (var i = 0; i < this.shopcarts.length; i++) {for (var j = 0; j < this.shopcarts[i].products.length; j++) {var item = this.shopcarts[i].products[j];// 判断 isSelect 的值，if (item.isSelect == true) {// count 商品数量相加 求总数shopTotal += item.count;}}}return shopTotal;}}})app.mount('#app')
![[推荐]感恩老师的作文100字范文](https://100zi.50zi.cn/uploadfile/img/2024/08/08/e3ee35635834a198ecc9b2f5e2a59067.jpg)
