<!DOCTYPE html>
<html>
<!DOCTYPE html> <html> <head> <meta charset="utf-8"> <title></title> <script src="js/vue.js"></script> <!-- CSS --> <link rel="stylesheet" type="text/css" href="css/bootstrap4.min.css"/> </head> <body> <div id="app"> <input type="text" placeholder="请输入商品名称" class="form-control" style="width: 300px;margin: 20px;" v-model="word"> <table class="table"> <tr> <th>选择</th> <th>序号</th> <th>商品图片</th> <th>商品名称</th> <th>商品单价</th> <th>商品小计</th> <th>购买数量</th> <th>操作</th> </tr> <tr v-for="(v,k) in res"> <th><input type="checkbox" v-model="v.is_check"></th> <th>{{k+1}}</th> <th><img :src="v.goods_img" alt="无法识别" width="100" height="100"></th> <th>{{v.goods_name}}</th> <th>{{v.goods_price.toFixed(2)}}</th> <th>{{v.goods_sum.toFixed(2)}}</th> <th> <button type="button" class="btn btn-primary" @click="jian(k)">-</button> {{v.goods_num}} <button type="button" class="btn btn-primary" @click="jia(k)">+</button> </th> <th> <button type="button" class="btn btn-danger" @click="del(k)">删除</button> </th> </tr> </table> <p> 您当前选中<label style="color: red;font-size: 20px;font-weight: bold;">{{count}}</label>件商品, 总价为:¥<label style="color: red;font-size: 20px;font-weight: bold;">{{priceSum}}</label> </p> <button type="button" class="btn btn-primary" @click="fun1()">全选</button> <button type="button" class="btn btn-primary" @click="fun2()">全不选</button> <button type="button" class="btn btn-primary" @click="fun3()">反选</button> <button type="button" class="btn btn-danger" @click="fun4()">批量删除</button> </div> </body> </html> <script> new Vue({ el:"#app", data:{ word:'', list:[ { goods_name:'李白-凤求凰',//名称 goods_img:'https://ss0.bdstatic.com/70cFuHSh_Q1YnxGkpoWK1HF6hhy/it/u=182292951,1294008673&fm=26&gp=0.jpg',//图片 goods_price:1688,//单价 goods_num:1,//购买数量 goods_sum:1688,//小计 is_check:false }, { goods_name:'镜-炽热神光',//名称 goods_img:'https://ss2.bdstatic.com/70cFvnSh_Q1YnxGkpoWK1HF6hhy/it/u=1257477182,1700333640&fm=11&gp=0.jpg',//图片 goods_price:1688,//单价 goods_num:1,//购买数量 goods_sum:1688,//小计 is_check:false }, { goods_name:'露娜-紫霞仙子',//名称 goods_img:'https://ss0.bdstatic.com/70cFvHSh_Q1YnxGkpoWK1HF6hhy/it/u=162561561,435847683&fm=26&gp=0.jpg',//图片 goods_price:888,//单价 goods_num:1,//购买数量 goods_sum:888,//小计 is_check:false }, { goods_name:'孙悟空-地狱火',//名称 goods_img:'https://ss0.bdstatic.com/70cFvHSh_Q1YnxGkpoWK1HF6hhy/it/u=2932847835,1578465715&fm=26&gp=0.jpg',//图片 goods_price:1688,//单价 goods_num:1,//购买数量 goods_sum:1688,//小计 is_check:false }, { goods_name:'貂蝉-异域舞娘',//名称 goods_img:'https://ss3.bdstatic.com/70cFv8Sh_Q1YnxGkpoWK1HF6hhy/it/u=381785760,2363478747&fm=15&gp=0.jpg',//图片 goods_price:288,//单价 goods_num:1,//购买数量 goods_sum:288,//小计 is_check:false } ] }, methods:{ jia(index){ var obj = this.list[index] obj.goods_num++ obj.goods_sum = obj.goods_num*obj.goods_price }, jian(index){ var obj = this.list[index] obj.goods_num = obj.goods_num-1 <= 1 ? 1 : obj.goods_num-1 obj.goods_sum = obj.goods_num*obj.goods_price }, del(index){ if(confirm('确定要删除吗?')){ this.list.splice(index,1) } }, fun1(){ this.list.map(function(v,k){ v['is_check'] = true }) }, fun2(){ this.list.map(function(v,k){ v['is_check'] = false }) }, fun3(){ this.list.map(function(v,k){ if(v['is_check']){ v['is_check'] = false }else{ v['is_check'] = true } }) }, fun4(){ if(confirm('确定要删除所选内容吗?')){ //把不删除的拿出来 var arr = [] this.list.map(function(v,k){ if(v['is_check']==false){ arr.push(v) } }) this.list = arr } } }, computed:{ res(){ var word = this.word if(word==''){ return this.list }else{ var arr = [] this.list.map(function(v,k){ if(v.goods_name.indexOf(word)>-1){ arr.push(v) } }) return arr; } }, count(){ var i=0 this.list.map(function(v,k){ if(v['is_check']){ i+=1 } }) return i; }, priceSum(){ var i=0; this.list.map(function(v,k){ if(v['is_check']){ // console.log(); i += v['goods_sum'] } }) return i.toFixed(2); } } }) </script>