vue实现简单的购物车算账系统
程序员文章站
2022-07-10 21:49:54
使用vue实现简单的购物车算账系统 Document &...
使用vue实现简单的购物车算账系统
<!DOCTYPE html><html lang="en"><head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>Document</title></head><body> <div id="box"> <input type="checkbox" v-model='ischeckAll' @change='checkAll'/><span>全选</span> <ul > <li v-for="data in datalist"><input type="checkbox" v-model="checkgrounp" :value="data" @change='hadleLiChange'/> {{data}} <button @click='delClick(data)'>del</button> {{data.number}} <button @click="data.number++">add</button> </li> </ul> <br> 总金额：{{getsum()}} </div>
<script src="./lib/vue.js"></script> <script> var vm=new Vue({ el:"#box", data:{ datalist:[ {name:'商品1',number:1,price:10,id:1}, {name:'商品2',number:1,price:20,id:2}, {name:'商品3',number:1,price:30,id:3}, ], checkgrounp:[], pricesum:'', ischeckAll:false }, methods:{ getsum:function(){ var pricesum=0; for (var i in this.checkgrounp){ pricesum+=this.checkgrounp[i].number * this.checkgrounp[i].price } return pricesum }, checkAll:function(){ if(this.ischeckAll){ this.checkgrounp=this.datalist }else{ this.checkgrounp=[] } }, delClick:function(data){ data.number-- if(data.number<=1){ data.number=1 } }, hadleLiChange:function(){ if(this.checkgrounp.length===this.datalist.length){ this.ischeckAll=true }else{ this.ischeckAll=false } } }
}) </script></body></html>本文地址：https://blog.csdn.net/wenxunliu/article/details/107290273
下一篇： 利用vant上传图片功能（可多选）