使用计算属性实现购物车功能效果（商品数量增减、单选多选计算金额和总价，）
使用计算属性实现购物车效果（商品数量增减、单选多选计算金额和总价，）涉及知识：Vue 基本指令Vue 计算属性使用 Vue 的基础语法知识，包括插值表达式与数据绑定、常用指令、计算属性等实现购物车的数据展示效果。效果图展示代码实现使用v-for循环，实现展示购物车效果<!DOCTYPE html><html lang="zh-cn"><head><meta
·
使用计算属性实现购物车效果（商品数量增减、单选多选计算金额和总价，）
涉及知识：
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="https://unpkg.com/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: 2003,
// 店铺名称
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:{
//商品数量+1
add(shop){
shop.count++;
},
//商品数量-1
reduce(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')
前往低代码交流专区
更多推荐
3
0- 0
已为社区贡献3条内容
所有评论(0)