VUE购物车,巩固小练习,加油 符合小白的vue。加油 <最下有在线展示奥> bootstrap+vue,js(vue-resource)完成购物车。实现了商品的选择,删除,全选(取消全选)。 以及商品的价格双向绑定和总价的实时计算。 巩固ajax获取模拟后台的json数据,并对数据进行操作处理。 html 代码 <!DOCTYPE html> <html lang="zh-CN"> <head> <meta charset="utf-8"> <meta http-equiv="X-UA-Compatible" content="IE=edge"> <meta name="viewport" content="width=device-width, initial-scale=1"> <!-- 上述3个meta标签*必须*放在最前面,任何其他内容都*必须*跟随其后! --> <title>宋先森的购物车</title> <!-- Bootstrap --> <link href="//cdn.bootcss.com/bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet"> <!-- HTML5 shim and Respond.js for IE8 support of HTML5 elements and media queries --> <!-- WARNING: Respond.js doesn't work if you view the page via file:// --> <!--[if lt IE 9]> <script src="https://cdn.bootcss.com/html5shiv/3.7.3/html5shiv.min.js"></script> <script src="https://cdn.bootcss.com/respond.js/1.4.2/respond.min.js"></script> <![endif]--> <style type="text/css"> /** { border: 1px solid darkgray; }*/ /*模块之间 分层70px*/ .projectname, .noticelist { margin-bottom: 70px; } /*商品列表 和 结账 上边距*/ .noticelist, .settle { border-top: 2px solid crimson; } .notice { border: 2px solid #FFF; } /*鼠标经过图片触发*/ .notice:hover { border: 2px solid lightcoral; } /*商品数量设置*/ .inputNum { display: inline-block; width: 50px; } /*商品列表图片高贺和宽*/ .noticemin { width: 80px; height: 60px; } /*单价字体颜色*/ .zong_price { color: lightcoral; } /*结账 的字体大小*/ .accounts { font-size: 2.3em; } /*全选(取消全选)的字体大小*/ .btnchoose { font-size: 1.5em; } /*结账模块的外边距底部*/ .settle { margin-bottom: 70px; } /*结账按钮外边距*/ .btnaccounts { margin-bottom: 1em; } </style> </head> <body> <div id="notice_index" class="container"> <div class="row clearfix projectname"> <!--项目名字--> <div class="col-md-12 column"> <h1 class="text-center"> bootstrap+vue.js 购物车项目 </h1> </div> </div> <!--商品图片表--> <div class="row clearfix noticelist"> <!--选择商品--> <div class="col-md-12 column"> <h4 class="text-left"> 单击选择您要购买的商品: </h4> </div> <div class="col-md-4 column text-center" v-for="itemImg in noticeList"> <img :alt="itemImg.name" v-bind:src="itemImg.img" v-on:click="selectnotice(itemImg,1)" class="img-rounded notice" /> </div> </div> <!--商品列表--> <div class="row clearfix"> <div class="col-md-12 column"> <table class="table table-hover table-striped"> <thead> <tr> <th> 编号 </th> <th> 商品信息 </th> <th> 商品单价 </th> <th> 商品数量 </th> <th> 总金额 </th> <th> 删除 </th> </tr> </thead> <tbody> <tr v-for="(item,index) in noticeList" v-if="item.checked"> <td> {{index+1}} </td> <td> <span> <img alt="item.name" v-bind:src="item.img" class="img-rounded noticemin"/> </span> <span> <strong>{{item.name}}</strong> <p>赠品:</p>{{item.gift}} </span> </td> <td> {{item.danprice|formatMoney}} </td> <td> <button v-on:click="changeMoney(item,-1)"><strong>-</strong></button> <input type="text" class="form-control inputNum" disabled="disabled" value="0" v-model="item.number" /> <button v-on:click="changeMoney(item,1)"><strong>+</strong></button> </td> <td class="zong_price"> {{item.zongprice=item.danprice*item.number|formatMoney}} </td> <td> <a id="modal-418866" href="#modal-container-418866" role="button" class="btn" data-toggle="modal" v-on:click="delconfirm(item)">删除</a> </td> </tr> </tbody> </table> <!--结账模块--> <div class="row clearfix settle"> <div class="col-sm-6 column"> <a href="#" role="button" class="btn btnchoose" @click="selectall(1)">全选</a> <a href="#" role="button" class="btn btnchoose" @click="selectall(-1)">取消全选</a> </div> <div class="col-sm-6 column text-center"> <span class="accounts">结账:</span> <button type="button" class="btn btn-danger btn-lg btnaccounts" onclick="alert('小练习不能跳转!')"> {{total_price|formatMoney}} </button> </div> </div> </div> </div> <!--删除弹出 拟态窗--> <div class="row clearfix"> <div class="col-md-12 column"> <div class="modal fade" id="modal-container-418866" role="dialog" aria-labelledby="myModalLabel" aria-hidden="true"> <div class="modal-dialog"> <div class="modal-content"> <div class="modal-header"> <button type="button" class="close" data-dismiss="modal" aria-hidden="true">×</button> <h4 class="modal-title" id="myModalLabel"> 您要删除商品吗? </h4> </div> <div class="modal-body text-center"> 您要删除商品吗? </div> <div class="modal-footer"> <button type="button" class="btn btn-default" data-dismiss="modal">关闭 </button> <button type="button" class="btn btn-primary" data-dismiss="modal" v-on:click="selectnotice(delitem,-1)">删除 </button> </div> </div> </div> </div> </div> </div> </div> <!-- jQuery (necessary for Bootstrap's JavaScript plugins) --> <script src="https://cdn.bootcss.com/jquery/1.12.4/jquery.min.js"></script> <!-- Include all compiled plugins (below), or include individual files as needed --> <script src="//cdn.bootcss.com/bootstrap/3.3.7/js/bootstrap.min.js"></script> <!--vue.js--> <script src="//cdn.bootcss.com/vue/2.2.2/vue.min.js"></script> <script src="//cdn.bootcss.com/vue-resource/1.2.1/vue-resource.min.js"></script> <script type="text/javascript"> /** * Created by Administrator on 2017/3/28. * 购物车首页的vue.js用于数据绑定 */ new Vue({ el: "#notice_index", data: { total_price: 0, noticeList: [{ "checked": false, "img": "http://sczgodofwar.top/zuopin/shoppingCart/img/201.png", "name": "鼠标", "danprice": 21, "number": 0, "zongprice": 0, "gift": "鼠标垫" }, { "checked": false, "img": "http://sczgodofwar.top/zuopin/shoppingCart/img/202.png", "name": "键盘", "danprice": 60, "number": 0, "zongprice": 0, "gift": "鼠标垫,数据线" }, { "checked": false, "img": "http://sczgodofwar.top/zuopin/shoppingCart/img/203.png", "name": "U盘", "danprice": 25, "number": 0, "zongprice": 0, "gift": "数据线" } ], delitem: '' }, filters: { formatMoney: function(value) { return "¥" + value.toFixed(2); } }, mounted: function() { this.$nextTick(function() { this.noticedetail(); }) }, methods: { //获取json文件的 数据 /* noticedetail: function () { this.$http.get("json/noticeList.json").then(res => { this.noticeList = res.body.noticelist; }) },*/ //商品数量加减函数 changeMoney: function(notice, way) { if(way > 0) { notice.number++; if(notice.number > 99) { notice.number = 99; } } else { notice.number--; if(notice.number < 0) { notice.number = 0; } } this.totalPrice; }, //商品选择 selectnotice: function(item, way) { if(way > 0) { item.checked = true; } else { item.checked = false; } this.totalPrice; }, //商品是否要 全选中 selectall: function(way) { this.noticeList.forEach(item => { //IE浏览器 可能不支持箭头函数把 item=>改成function(item)就好。 if(way > 0) { item.checked = true; } else { item.checked = false; } }) this.totalPrice; }, //删除商品 delconfirm: function(item) { this.delitem = item; } }, computed: { //结账 总金额的实时计算 totalPrice: function() { //IE浏览器 可能不支持箭头函数把 item=>改成function(item)就好。再加上 _this=this。 this.total_price = 0; this.noticeList.forEach(item => { if(item.checked == true) { this.total_price += item.danprice * item.number; } }) } } }); </script> </body> </html> 购物车 在线 url 前端学习交流,戳
评论 (7 )
最新评论
楼主,继续加油
购物车默认数量都应该是1
应该在选中的默认情况下是1才对,0应该不对
就是0啊
默认数量是0呐
嗯嗯,VUE0基础的小白来练手 不错的
支持下,最近也在学vue~