?
<!DOCTYPE?html>
<html?lang="en">
<head>
????<meta?charset="UTF-8">
????<meta?http-equiv="X-UA-Compatible"?content="IE=edge">
????<meta?name="viewport"?content="width=device-width,?initial-scale=1.0">
????<title>Document</title>
</head>
<body>
????<script?src="js/vue.js"?type="text/javascript"></script>
????<script?src="js/jquery-3.6.0.js"?type="text/javascript"></script>
????<div?id="app"?>
????????<div?it="container">
????????????<my-cart></my-cart>
????????</div>
????</div>
????<style>
????????*?{
????????????
????????????padding:?0;
????????????margin:?0
????????}
????????
????????a?{
????????????text-decoration:?none;
????????}
????????
????????.container?{
????????????width:?500px;
????????????margin:?10px?auto;
????????}
????????
????????.title?{
????????????width:?500px;
????????????height:?50px;
????????????text-align:?center;
????????????line-height:?50px;
????????????font-size:?20px;
????????????background-color:?paleturquoise;
????????}
????????
????????.item?{
????????????width:?500px;
????????????position:?relative;
????????????height:?50px;
????????????border-bottom:?1px?solid?rgb(0,?0,?0);
????????}
????????
????????.item?img?{
????????????float:?left;
????????????width:?100px;
????????????height:?50px;
????????}
????????/*?.item?name?{
????????????position:?absolute;
????????????float:?left;
????????????width:?120px;
????????????margin-left:?10px;
????????????top:?15px;
????????????left:?100px;
????????}?*/
????????
????????/*?.item?.price?{
????????????position:?absolute;
????????????float:?left;
????????????width:?120px;
????????????margin-left:?10px;
????????????top:?15px;
????????????left:?100px;
????????}?*/
????????
????????.item?.change?{
????????????position:?absolute;
????????????left:?220px;
????????????top:?15px;
????????????float:?left;
????????????width:?200px;
????????}
????????
????????.change?a?{
????????????float:?left;
????????????display:?block;
????????????width:?20px;
????????????height:?20px;
????????????font-size:?18px;
????????????text-align:?center;
????????????line-height:?20px;
????????????background-color:?#ccc;
????????}
????????
????????.change?input?{
????????????float:?left;
????????????width:?50px;
????????????margin:?0?5px;
????????}
????????
????????.item?.del?{
????????????position:?absolute;
????????????top:?8px;
????????????left:?420px;
????????????color:?red;
????????????font-size:?24px;
????????}
????????
????????.item?.del:hover?{
????????????top:?0;
????????????height:?50px;
????????????background-color:?rgb(247,?247,?247);
????????}
????????
????????.total?{
????????????position:?relative;
????????????width:?500px;
????????????height:?50px;
????????????background-color:?sandybrown;
????????}
????????
????????.total?span?{
????????????position:?absolute;
????????????top:?14px;
????????????left:?250px;
????????}
????????
????????.total?span?em?{
????????????color:?red;
????????????font-style:?normal;
????????????font-size:?20px;
????????}
????????
????????.total?button?{
????????????position:?absolute;
????????????top:?8px;
????????????left:?400px;
????????????width:?50px;
????????????height:?35px;
????????????border-radius:?25%;
????????????border:?none;
????????????outline:?none;
????????????background-color:?tomato;
????????}
????</style>
????<script?src="js/vue.js"></script>
????<script>
????????//?三个子组件
????????var?CartTitle?=?{
????????????
????????????template:?`<div?class="title">我的商品</div>`
????????}
????????var?CartList?=?{
????????????props:?['list'],
????????????template:?`?<div?class="list">
????????????????????<div?class="item"?:key="item.id"?v-for="item?in?list">
????????????????????????<img?:src="item.img"?alt="">
????????????????????????<div?class="name">{{item.name}}</div>
????????????????????????<div?class="change">
????????????????????????????<a?href=""?@click.prevent="sub(item.id)">-</a>
????????????????????????????<input?type="text"?class="num"?:value="item.num"?@blur="changenum(item.id,$event)">
????????????????????????????<a?href=""?@click.prevent="add(item.id)">+</a>
????????????????????????</div>
????????????????????????<div?class="del"?@click="del(item.id)">×</div>
????????????????????</div>
????????????????</div>
????????????????????`,
????????????methods:?{
??????????????
????????????????del:?function(id)?{
????????????????????
????????????????????this.$emit("del-cart",?id);
????????????????},
???????????????
????????????????changenum:?function(id,?event)?{
???????????????????
????????????????????this.$emit('change-num',?{
????????????????????????id:?id,
????????????????????????num:?event.target.value
????????????????????})
????????????????},
????????????????
????????????????sub:?function(id)?{
????????????????????this.$emit('sub-num',?id);
????????????????},
????????????????
????????????????add:?function(id)?{
????????????????????this.$emit('add-num',?id);
????????????????}
????????????}
????????}
????????var?CartTotal?=?{
????????????????props:?['list'],
????????????????template:?`<div?class="total">
????????????????????<span>总价：<em>{{total}}</em>￥</span>
????????????????????<button>结算</button>
????????????????</div>`,
????????????????computed:?{
????????????????????total:?function()?{
????????????????????????var?sum?=?0;
????????????????????????this.list.forEach(item?=>?{
????????????????????????????sum?+=?item.price?*?item.num;
????????????????????????});
????????????????????????return?sum;
????????????????????}
????????????????}
????????????}
????????????//父组件
????????Vue.component('my-cart',?{
????????????data:?function()?{
????????????????return?{
????????????????????
????????????????????list:?[{
????????????????????????id:?1,
????????????????????????name:?'TCL彩电',
????????????????????????price:?460,
????????????????????????num:?1,
????????????????????????img:?'images/猫一.jpg'
????????????????????},?{
????????????????????????id:?2,
????????????????????????name:?'机顶盒',
????????????????????????price:?3000,
????????????????????????num:?1,
????????????????????????img:?'images/猫二.jpg'
????????????????????},?{
????????????????????????id:?3,
????????????????????????name:?'海尔冰箱',
????????????????????????price:?6799,
????????????????????????num:?1,
????????????????????????img:?'images/猫三.jpg'
????????????????????},?{
????????????????????????id:?4,
????????????????????????name:?'小米手机',
????????????????????????price:?2000,
????????????????????????num:?1,
????????????????????????img:?'images/猫二.jpg'
????????????????????},
?????????????????????{
????????????????????????id:?5,
????????????????????????name:?'PPTV电视',
????????????????????????price:?1000,
????????????????????????num:?1,
????????????????????????img:?'images/猫二.jpg'
????????????????????}
????????????????]
????????????????}
????????????},
????????????template:?`<div?class="mycart">
????????????????<cart-title></cart-title>
????????????????<cart-list?:list="list"?@del-cart="delcart($event)"?@change-num="changeNum($event)"?@sub-num="subnum($event)"?@add-num="addnum($event)"></cart-list>
????????????????<cart-total?:list="list"></cart-total>
????????????????</div>`,
????????????components:?{
????????????????'cart-title':?CartTitle,
????????????????'cart-list':?CartList,
????????????????'cart-total':?CartTotal,
????????????},
????????????methods:?{
????????????????delcart:?function(id)?{
????????????????????//?根据id删除list中对应的数据
????????????????????//?1.找到id对应数据的索引
????????????????????var?index?=?this.list.findIndex(item?=>?{
????????????????????????return?item.id?==?id;
????????????????????});
????????????????????//?2.根据索引删除对应的数据
????????????????????this.list.splice(index,?1);
????????????????},
????????????????//?根据id修改list中的数量num
????????????????changeNum:?function(val)?{
????????????????????//console.log(val);
????????????????????this.list.some(item?=>?{
????????????????????????if?(item.id?==?val.id)?{
????????????????????????????item.num?=?val.num;
????????????????????????}
????????????????????})
????????????????},
????????????????
????????????????subnum:?function(event)?{
????????????????????//?console.log(event);?event是点击的id号
????????????????????this.list.some(item?=>?{
????????????????????????if?(item.id?==?event?&&?item.num?>?0)?{
????????????????????????????item.num--;
????????????????????????}
????????????????????})
????????????????},
????????????????
????????????????addnum:?function(event)?{
????????????????????this.list.some(item?=>?{
????????????????????????if?(item.id?==?event)?{
????????????????????????????item.num++;
????????????????????????}
????????????????????})
????????????????}
????????????}
????????});
????????var?vm?=?new?Vue({
????????????el:?"#app",
????????????data:?{
????????????}
????????});
????</script>
</body>
</html>