<!-- //按照组件化方式实现业务需求 // 根据业务功能进行组件化划分 // 1.标题组件(展示文本) // 2.列表组件(列表展示 商品数量变更 商品删除) // 3.结算组件(计算商品总额) // 功能实现步骤: // 实现整体布局和样式效果 // 划分独立的功能组件 // 结合所有的子组件形成整体结构 // 逐个实现各个组件功能 // 标题组件 // 列表组件 // 结算组件 --> <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Document</title> <style type="text/css"> .container .cart { width: 300px; margin: auto; } .container .title { background-color: lightblue; height: 40px; line-height: 40px; text-align: center; /*color: #fff;*/ } .container .total { background-color: #FFCE46; height: 50px; line-height: 50px; text-align: right; } .container .total button { margin: 0 10px; background-color: #DC4C40; height: 35px; width: 80px; border: 0; } .container .total span { color: red; font-weight: bold; } .container .item { height: 55px; line-height: 55px; position: relative; border-top: 1px solid #ADD8E6; } .container .item img { width: 45px; height: 45px; margin: 5px; } .container .item .name { position: absolute; width: 90px; top: 0;left: 55px; font-size: 16px; } .container .item .change { width: 100px; position: absolute; top: 0; right: 50px; } .container .item .change a { font-size: 20px; width: 30px; text-decoration:none; background-color: lightgray; vertical-align: middle; } .container .item .change .num { width: 40px; height: 25px; } .container .item .del { position: absolute; top: 0; right: 0px; width: 40px; text-align: center; font-size: 40px; cursor: pointer; color: red; } .container .item .del:hover { background-color: orange; } </style> </head> <body> <div id="app"> <div class="container"> <my-cart></my-cart> </div> </div> <script type="text/javascript" src="js/vue.js"></script> <script type="text/javascript"> var cartTitle = { props:[\'uname\'], template: ` <div class="title">{{uname}}商品</div> ` } var cartList = { props:[\'list\'],//props传递的数据是不做修改的 // $even得到当前值 template: ` <div> <div class="item" :key = \'item.id\' v-for=\'item in list\'> <img :src="item.img"/> <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){ // console.log(id); //把id传递给父组件 this.$emit(\'cart-del\',id);//$emit传递值 }, changeNum:function(id,event){ //不推荐直接操作list数据,还是把id和值传递给父组件 // console.log(id,event.target.value); this.$emit(\'cart-change\',{ 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>总价：{{total}}</span> <button>结算</button> </div> `, computed:{ total:function(){ //计算商品的总价 var t = 0; this.list.forEach(item=>{ t += item.price * item.num; }) return t; } } } Vue.component(\'my-cart\',{ data:function(){ return{ uname:\'张三\', list: [{ id: 1, name: \'TCL彩电\', price: 1000, num: 1, img: \'img/a.jpg\' },{ id: 2, name: \'机顶盒\', price: 1000, num: 1, img: \'img/b.jpg\' },{ id: 3, name: \'海尔冰箱\', price: 1000, num: 1, img: \'img/c.jpg\' },{ id: 4, name: \'小米手机\', price: 1000, num: 1, img: \'img/d.jpg\' },{ id: 5, name: \'PPTV电视\', price: 1000, num: 2, img: \'img/e.jpg\' }] } }, template:` <div class="cart"> <cart-title :uname=\'uname\'></cart-title> <cart-list :list=\'list\' @cart-del=\'delCart($event)\' @cart-change=\'changeCart($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); }, changeCart:function(val){ // 根据子组件的数据,改变list中的数据 this.list.some(item=>{ if(item.id == val.id){ item.num = val.num; //终止遍历 return true; } }) }, addNum:function(id){ // console.log(this.list); this.list.some(item=>{ if(item.id == id){ item.num ++; //终止遍历 return true; } }) }, subNum:function(id){ // console.log(this.list); this.list.some(item=>{ if(item.num > 0) { if(item.id == id){ item.num --; //终止遍历 return true; } }else{ return } }) }, } }) var vm = new Vue({ el: \'#app\', data: { } }); </script> </body> </html>