这篇文章主要讲解了“vue怎么实现商品多选功能”，文中的讲解内容简单清晰，易于学习与理解，下面请大家跟着小编的思路慢慢深入，一起来研究和学习“vue怎么实现商品多选功能”吧！
具体代码如下
<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <meta http-equiv="X-UA-Compatible" content="ie=edge"> <title>vue实现实现全选，结算</title></head><style> *{ margin: 0; padding: 0; list-style: none; } #app{ width: 80%; margin: auto; } .wrap{ width: 100%; margin: auto; } .shangjia{ font-size: 20; font-weight: bold; color: #000; height: 36px; line-height: 36px; } .checked_inpu{ margin-right: 10px; margin-left: 10px; } .all_list{ padding-top: 10px; width: 100%; margin: auto; background: #bbb; } .list_item{ width: 80%; display: flex; justify-content: flex-start; position: relative; margin: 3px 0; padding: 6px 0; } img{ display: inline-block; } .list_box{ display: inline-block; }.list_img_tit_price{ display:inline-flex; align-content:space-between;}.list_img{ width: 100px; height: 100px;}.list_tit_price{ display: flex; flex-flow: column; margin-left:10px; font-size: 16px; justify-content: space-between;}.total{ display:inline-flex; flex-wrap: row; float: right; margin-top: 60px; margin-left: 20px;}.num_cancle,.num_add{ font-size: 20px; font-weight: bolder; margin:0 2px; padding: 1PX; line-height: 36px;}.num_cancle:hover,.num_add:hover{ cursor: pointer;}.num_total{ width:30px; text-align: center; font-weight: bold;}.result{ float: right; display: inline-flex;}.heji{ margin: 0 12px; padding:3px;}.jisuan_btn{ color: #fff; background: #f30; font-size: 18px; font-weight: bold; padding: 3px; border-style: none;}</style><body> <div id="app"> <div class="wrap shangjia"> <input type="checkbox" class="checked_inpu" v-model="checkedAll">选择商家全部商品 </div> <div class="wrap all_list"> <ul> <li v-for="(item, index) in allList" class="list_item" > <input v-model="item.checked" type="checkbox" class="checked_inpu"> <div class="list_box"> <div class="list_img_tit_price"> <img :src="item.src" alt="" class="list_img"> <div class="list_tit_price"> <div>{{item.title}}</div> <div >￥{{item.price}}</div> </div> </div> <div class="total"> <div class="num_cancle" @click="controlNum('cancle', index)">-</div> <input type="text" class="num_total" v-model.number="item.order"> <div class="num_add" @click="controlNum('add',index)">+</div> </div> </div> </li> </ul> </div> <div class="wrap"> <input type="checkbox" class="checked_inpu" v-model="checkedAll">全选 <div class="result"> <div class="heji">合计：<span>{{amountPrice}}</span></div> <button class="jisuan_btn">去结算({{sumTotal}})</button> </div> </div> </div></body><script src="./vue.js"></script><script> const vm = new Vue({ el:"#app", data:{ allList:[ { title:"【第一】黄河之水天上来，奔流到海不复回", src:'./img/1.jpg', price:880, order:1, id:0 }, { title:"【第二】黄河之水天上来，奔流到海不复回", src:'./img/2.jpg', price:881, order:1, id:1 }, { title:"【第三】黄河之水天上来，奔流到海不复回", src:'./img/3.jpg', price:882, order:1, id:2 }, { title:"【第四】黄河之水天上来，奔流到海不复回", src:'./img/4.jpg', price:883, order:1, id:3 }, { title:"【第五】黄河之水天上来，奔流到海不复回", src:'./img/5.jpg', price:884, order:1, id:4 }, { title:"【第六】黄河之水天上来，奔流到海不复回", src:'./img/6.jpg', price:885, order:1, id:5 }, ] }, methods:{ controlNum(temp,index){ if(temp==="add"){ this.allList[index].order++; }else{ if(this.allList[index].order<=1){ alert("数量不能小于一了哟！！") return ; } this.allList[index].order--; } } }, computed:{ selectTotal(){ return this.allList.filter(el => el.checked) }, amountPrice(){ let price = 0; this.selectTotal.forEach(el => { price +=el.price * el.order }) return price; }, sumTotal(){ let total=0; for(let i = 0; i < this.selectTotal.length; i ++){ total += this.selectTotal[i].order; } return total; }, checkedClick(e){ return e; }, checkedAll:{ get(){ return this.allList.every(el=>el.checked) }, set(val){ this.allList.forEach(el=>el.checked=val) } } } }) vm.allList.forEach(el => vm.$set(el, "checked", false));</script></html>未全选
全选
感谢各位的阅读，以上就是“vue怎么实现商品多选功能”的内容了，经过本文的学习后，相信大家对vue怎么实现商品多选功能这一问题有了更深刻的体会，具体使用情况还需要大家实践验证。这里是编程网，小编将为大家推送更多相关知识点的文章，欢迎关注！
