<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Title</title> <link rel="stylesheet" href="css/bootstrap.min.css"> <script src="js/vue.min.js"></script> <style> *{ margin: 0; padding: 0; } #app{ text-align: center; } tr{ border: 1px solid #000; line-height: 5rem; } td{ border: 1px solid #000; line-height: 5rem; } hr{ border-bottom: 1px solid #000; } h2{ width: 100%; height: 5rem; line-height: 5rem; text-align: center; } .box1{ width: 100%; } ul{ width: 100%; display: flex; height: 5rem; line-height: 5rem; } li{ width: 25%; text-align: center; list-style: none; border: 1px solid #000; } </style> </head> <body> <div id="app"> <!--父--> <fu-zj :list="list" :flag="falg" :abou="abou"></fu-zj> <!--子--> <zi-zj :list="list" :flag="falg" :abou="abou"></zi-zj> </div> <script> // <!--父组件--> Vue.component("fu-zj",{ props:['list','flag','abou'], template:`<div> <h2>购物车</h2> <table class="table table-bordered table-hover"> <tr> <th>id</th> <th>名称</th> <th>价格</th> <th>数量</th> <th>Actions</th> </tr> <tr v-for="(key,index) in list"> <td>{{key.id}}</td> <td>{{key.mc}}</td> <td>￥{{key.jg}}</td> <td>{{key.sl}}</td> <td> <button class="btn btn-primary" @click="tjgwc(key)" v-show="!key.flag" @click="send(key)">{{key.ac}}</button> <div v-show="key.abou" > <button @click="jia(key)" class="btn btn-primary">+</button> <button @click="jian(key)" class="btn btn-primary">-</button> </div> </td> </tr> </table> <button class="btn btn-primary" colspan="5">购物车信息</button> </div>`, methods:{ // 添加购物车 tjgwc(key){ key.flag=!key.flag key.abou=!key.abou key.sl++ }, //发送到子级 send(key){ bust.$emit('key',key); }, //加 jia(key){ key.sl++; console.log(key.sl) }, //减 jian(key){ if(key.sl>1){ key.sl--; }else{ key.sl=0; key.flag=!key.flag key.abou=!key.abou } } } }) //子组件 Vue.component('zi-zj',{ props:['list','falg','abou'], data(){ return{ arr:[] } }, template:` <div> <hr/> <h2>购物车</h2> <table class="table table-bordered table-hover"> <tr> <th>id</th> <th>名称</th> <th>价格</th> <th>数量</th> <th>总价</th> <th>Actions</th> </tr> <tr v-for="(key,index) in arr"> <td>{{key.id}}</td> <td>{{key.mc}}</td> <td>￥{{key.jg}}</td> <td>{{key.sl}}</td> <td>{{key.jg*key.sl}}</td> <td> <input class="btn btn-default a" type="button" value="+" @click="jia(key)"> <input class="btn btn-default a" type="button" value="-" @click="jian(key)"> <input class="btn btn-default a" type="button" value="x" @click="del(key)"> </td> </tr> <tr> <td>总数: {{sumCount()}} </td> <td>总价: ￥{{sumPrice()}} </td> <td colspan="6"> <button class="btn btn-default a" @click="qk">清空购物车</button> </td> </tr> </table> </div>`, //监听 watch:{ arr:{ handler(){ this.arr.forEach((res,index)=>{ if(res.sl == 0){ this.arr.splice(index,1); } }) }, deep: true } }, methods:{ //加 jia(key){ key.sl++; }, //减 jian(key){ if(key.sl>1){ key.sl--; }else{ key.sl=0 key.flag=!key.flag key.abou=!key.abou this.arr.splice(key,1) } }, //删除 del(key){ if(confirm("亲 , 确认要删除嘛 ？")){ this.arr.splice(key,1) key.flag=!key.flag key.abou=!key.abou } } , //清空 qk(){ if(confirm("小主 , 确认清空嘛 ？")) { this.arr.forEach((res,index)=>{ res.sl = ''; res.flag=!res.flag res.abou=!res.abou }) } }, //总价 sumPrice(){ let sum = 0 for(var key of this.list){ sum +=key.jg*key.sl } return sum }, //总数 sumCount(){ let sum = 0 for(let key of this.list){ sum += key.sl } return sum } , }, created(){ let that=this; bust.$on('key',function(key){ //这里的this指向的是bus，所以只能用that console.log(key) that.arr.push(key)/*把key对象里东西push到arr空数组里*/ }); } }) let bust=new Vue(); //初始化 new Vue({ el:"#app", data:{ list:[{ "id":"0", "jg":"8340", "mc":'iphone X', "sl":0, "ac":"添加到购物车", "zj":0, falg:false, abou:false }, { "id":"1", "jg":"2345", "mc":'华为 麦芒陆', "sl":0, "ac":"添加到购物车", "zj":0, falg:false, abou:false }, { "id":"2", "jg":"4340", "mc":'小米 Max2', "sl":0, "ac":"添加到购物车", "zj":0, falg:false, abou:false }, { "id":"3 ", "jg":"6340", "mc":'华为 Mate 10', "sl":0, "ac":"添加到购物车", "zj":0, falg:false, abou:false }], falg:false, abou:false }, methods:{ } }) </script> </body> </html>
VUE 父子组件 双向数据绑定 购物车
猜你喜欢
转载自blog.csdn.net/Q142725/article/details/80228918
今日推荐
周排行