HTML静态网页怎么实现数据之间的传递，把购物车计算的商品总价传递到结算页面。
这是购物车部分的代码
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>购物车</title>
<script src="js/v2.6.10/vue.js"></script>
<link rel="stylesheet" href="css/shopping.css">
</head>
<body>
<div class="box">
<ul>
<li v-for="(item,index) in goodslist" :key="item.name">
<div class="radio">
<input type="checkbox" :checked="item.checked" @click="changechecked($event,item.name)" />
<img :src="item.img" alt="" />
</div>
<div class="title">
<span>{{item.name}}</span>
<p class="price">￥{{item.price}}</p>
</div>
<div class="num-count">
<button ref="sub" @click="subcount(item.name)">-</button>
<input type="text" :value="item.count" />
<button ref="add" @click="addcount(item.name)">+</button>
</div>
</li>
</ul>
<div class="main">
<input type="checkbox" v-model="ischecked" @click="allchecked" />
<div class="sum">￥{{sum}}.00</div>
<div class="settlement">
<span @click="settlement"><a style="text-decoration: none;" href="jiesuan.html">结算</a>({{count}})</span>
</div>
</div>
</div>
<script type="text/javascript">
Vue.config.productionTip=false
new Vue({
el: ".box",
data: {
sum: 0,
ischecked: false,
count: 0,
goodslist: [
{
name: "ROG玩家国度 枪神plus 为勇者而生 ",
price: 16000,
img: "./img/1.jpg",
checked: false,
count: 1,
},
{
name: "天选二 2021款 英特尔i5-11400H 显卡因特尔3050T",
price: 5788,
img: "./img/2.jpg",
checked: false,
count: 1,
},
{
name: "灵耀 14 增强版 i5 独显 - Win11",
price: 4799,
img: "./img/3.jpg",
checked: false,
count: 1,
},
{
name: "华硕a豆 Pro 15 R5/16G/512G 灰",
price: 4699,
img: "./img/4.jpg",
checked: false,
count: 1,
},
],
},
methods: {
//单选按钮
changechecked(e, name) {
let result = this.goodslist.map((item) => {
if (name == item.name) {
item.checked = e.target.checked;
}
return item.checked;
});
let res = result.every((item) => {
return item;
});
if (res) {
this.ischecked = true;
} else {
this.ischecked = false;
}
this.getnewsum();
this.getnumcount();
},
//自减模块
subcount(name) {
//count自减
this.goodslist.filter((item) => {
if (item.name == name) {
if (item.count <= 0) return (item.count = 0);
item.count--;
}
});
this.getnewsum();
this.getnumcount();
},
//自增模块
addcount(name) {
//count自增
this.goodslist.filter((item) => {
if (item.name == name) {
item.count++;
}
});
this.getnewsum();
this.getnumcount();
},
//全选按钮
allchecked(e) {
if (e.target.checked) {
this.goodslist.forEach((item) => {
item.checked = true;
});
} else {
this.goodslist.forEach((item) => {
item.checked = false;
});
}
this.getnewsum();
this.getnumcount();
},
//弹出框
settlement() {
alert("你本次消费" + this.sum + ".00");
},
//计算总价
getnewsum() {
let num = 0;
this.goodslist.find((item) => {
if (item.checked) {
num += item.price * item.count;
}
});
this.sum = num;
},
//计算总数
getnumcount() {
let count = 0;
this.goodslist.find((item) => {
if (item.checked) {
count += item.count;
}
});
this.count = count;
},
},
});
</script>
</body>
</html>
这是第一部分的css样式
* {
padding: 0;
margin: 0;
}
.box {
width: 800px;
height: 800px;
margin: 0 auto;
}
li {
list-style: none;
}
.box ul li {
height: 100px;
background-color: #efefef;
display: flex;
margin-top: 10px;
justify-content: space-between;
align-items: center;
}
.box ul li .radio {
display: flex;
align-items: center;
}
.box ul li .radio img {
width: 100px;
height: 100px;
}
.box ul li .title {
width: 500px;
height: 100px;
display: flex;
flex-direction: column;
justify-content: space-between;
}
.box ul li .title span {
font-size: 16px;
font-weight: bold;
padding: 10px 0px;
}
.box ul li .title .price {
font-size: 20px;
padding: 10px 0px;
}
.box .main {
display: flex;
justify-content: space-between;
align-items: center;
width: 800px;
height: 50px;
margin-top: 70px;
}
.box .main .sum {
font-size: 20px;
font-weight: bold;
}
.box .main .settlement {
width: 100px;
height: 50px;
}
.box .main .settlement span {
line-height: 50px;
padding-left: 20%;
font-size: 18px;
cursor: pointer;
}
.box ul li .num-count {
width: 130px;
height: 30px;
display: flex;
justify-content: center;
}
.box ul li .num-count input {
width: 50px;
outline: none;
text-align: center;
}
.box ul li .num-count button {
width: 25px;
}
这是结算页面的代码
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>商品结算页面</title>
<link rel="stylesheet" href="./public_shop_account.css">
<link rel="stylesheet" href="css/jiesuan.css">
</head>
<body>
<nav class="public-header">
<a href="">网站首页</a>
<a href="">专题</a>
<a href="">网站导航</a>
<a href="">二手商品</a>
<a href="">讨论区</a>
<span>
<a href=""><i class="iconfont icon-huiyuan2"></i>登陆</a>
<a href="">免费注册</a>
</span>
</nav>
<div class="public-shop-account">
<div class="content">
<div class="shop-account-head"> 填写并核对订单信息 </div>
<div class="shop-account-info">
<div class="edit-address">
<div class="address-head">
<span>收货人信息</span>
<a href="">新增收货地址</a>
</div>
<div class="address-info">
<span>家里</span>
<span>xxx xx省xx市xx街道</span>
<a href="">编辑</a>
</div>
</div>
<div class="edit-pay">
<div class="pay-head">支付方式</div>
<div class="pay-info">
<span>货到付款</span>
<span>在线支付</span>
<a href="">更多>></a>
</div>
</div>
</div>
<div class="shop-account-detail">
<div class="account-address">
<span><i>1</i> 件商品，总商品金额：</span>
<span>¥31286 .00</span>
<span>运费：</span>
<span><i>¥0.00</i></span>
<span>商品优惠：</span>
<span>-￥5.00</span>
</div>
<div class="account-pay">
<span> 应付总额： <i>¥14792.00 </i></span>
<span>寄送至：xxxx xxxxxxxx 收货人：xxx 电话：</span>
</div>
<div class="account-btn"><button>提交订单</button></div>
</div>
</div>
</div>
<footer class="public-footer">
<div>
<a href="">简介</a>
<a href="">联系我们</a>
<a href="">招聘信息</a>
<a href="">友情链接</a>
<a href="">用户服务协议</a>
<a href="">隐私权声明</a>
<a href="">法律投诉声明</a>
</div>
<div><span>LOGO</span></div>
<div>
<p>2019 fengniao.com. All rights reserved . 安徽闹着玩有限公司（无聊网）版权所有</p>
<p>皖ICP证150110号 京ICP备14323013号-2 皖公网安备110108024357788号</p>
<p>违法和不良信息举报电话: 0551-1234567 举报邮箱: admin@baidu.com</p>
</div>
<div>
<p>关注公众号</p>
<img src="../static/images/erwei-code.png" alt="">
</div>
</footer>
</body>
</html>
第二部分css
@import "../public_reset.css";
@import "../public_header/public_header.css";
@import "../public_footer/public_footer.css";
.public-shop-account > .content {
width: 1200px;
background-color: #fff;
margin: 20px auto;
display: flex;
flex-direction: column;
}
.public-shop-account > .content >.shop-account-head{
margin: 10px 5px;
font-size: 16px;
}
.public-shop-account > .content >.shop-account-info{
border: 1px solid #ccc;
padding: 10px;
}
.public-shop-account > .content >.shop-account-info > .edit-address{
border-bottom: 1px solid #ccc;
}
.public-shop-account > .content >.shop-account-info > .edit-address >.address-head{
display: flex;
justify-content: space-between;
padding: 10px 0;
}
.public-shop-account > .content >.shop-account-info > .edit-address >.address-head >span{
font-size: 14px;
font-weight: bold;
}
.public-shop-account > .content >.shop-account-info > .edit-address >.address-head >a{
color: #005ea7;
font-size: 12px;
}
.public-shop-account > .content >.shop-account-info > .edit-address >.address-head >a:hover{
color: #E2231A;
}
.public-shop-account > .content >.shop-account-info > .edit-address > .address-info{
display: flex;
padding: 20px;
justify-content: space-between;
}
.public-shop-account > .content >.shop-account-info > .edit-address > .address-info >span:first-of-type{
width: 120px;
height: 30px;
border: 3px solid #E2231A;
text-align: center;
margin-right: 10px;
font-size: 16px;
line-height: 30px;
}
.public-shop-account > .content >.shop-account-info > .edit-pay > .pay-head{
font-size: 14px;
font-weight: bold;
padding: 20px 0;
}
.public-shop-account > .content >.shop-account-info > .edit-pay >.pay-info{
display: flex;
align-items: center;
}
.public-shop-account > .content >.shop-account-info > .edit-pay >.pay-info >span{
width: 100px;
height: 30px;
border: 2px solid #ccc;
margin: 10px;
text-align: center;
line-height: 30px;
}
.public-shop-account > .content >.shop-account-info > .edit-pay >.pay-info >span:hover{
border: 2px solid #E2231A;
}
.public-shop-account > .content > .shop-account-detail > .account-address{
padding: 20px;
display: grid;
grid-template-columns: 1fr 150px;
grid-template-rows: repeat(3, 30px);
justify-items: end;
}
.public-shop-account > .content > .shop-account-detail > .account-address i{
font-style: normal;
color: #E2231A;
}
.public-shop-account > .content > .shop-account-detail > .account-pay{
height: 80px;
background-color: #eee;
border: 1px solid #ccc;
display: flex;
padding: 10px 20px 0 0;
flex-direction: column;
align-items: flex-end;
}
.public-shop-account > .content > .shop-account-detail > .account-pay > span > i{
font-style: normal;
font-size: 20px;
color: #E2231A;
}
.public-shop-account > .content > .shop-account-detail > .account-btn{
display: flex;
justify-content: flex-end;
}
.public-shop-account > .content > .shop-account-detail > .account-btn > button{
border: none;
background-color: #E2231A;
color: #fff;
width: 120px;
height: 40px;
font-size: 16px;
font-weight: bold;
margin: 10px 0;
}
看了很多文献也没看懂怎么实现数据间传递，初学者望解答
