vue实现购物车功能.zip_vue加入购物车功能资源-CSDN下载

共3个文件

js：2个

html：1个

vue

购物车

需积分: 50 119 浏览量 2020-02-10 20:54:23 上传评论 3 收藏 123KB ZIP 举报

资源详情

资源评论

资源推荐

收起资源包目录

vue实现购物车功能.zip （3个子文件）

vue实现购物车功能

vue.min.js 91KB

vue.js 333KB

index.html 3KB

<!DOCTYPE html> <html> <head> <meta charset="utf-8"> <title></title> <script type="text/jscript" src="js/vue.js"></script> <style> body{ margin: auto; width: 500px; } #div1{ width: 300px; height: 500px; background-color: antiquewhite; } #font1{ padding-top: 10px; padding-left: 10px; color: coral; font-size: 20px; } #liename{ height: 40px; background-color: #FF7F50; } #liename ul{ margin: 0 auto; } #liename ul li{ list-style: none; float: left; line-height: 40px; padding-right: 49px; padding-left: -20px; } span{ text-align:right; padding-left: 30px; line-height: 40px; } #bottom{ margin-top: 170px; border-top: 5px solid beige; } #button1{ width: 200px; height: 40px; margin-left: 45px; } </style> </head> <body>  <div id="div1"> <p id="font1">购物车</p> <div id="liename"> <ul> <li>商品名</li> <li>单价</li> <li>份数</li> </ul> </div> <div id="goods"> <div v-for="data in datalist"> <span><input type="checkbox" v-model="checkgroup" :value="data" @change="handlelichange()" /> {{data.name}} </span> <span>{{data.price}}元</span> <span> <button @click="handledel(data)">-</button> {{data.number}} <button @click="handleadd(data)">+</button> </span> </div> <div id="bottom"> <span><input type="checkbox" v-model="isallcheck" @change="handlechange()" />全选</span>            <span>合计金额：{{getsum()}}</span> <button id="button1">支付</button> </div> </div> </div> <script type="text/jscript"> new Vue({ el: "#div1", data: { checkgroup:[], isallcheck:"", datalist: [{ name: "练习册", price: 25, number: 2 }, { name: "草稿纸", price: 10, number: 2 }, { name: "收纳盒", price: 15, number: 1 } ] }, methods: { handlechange(){ if(this.isallcheck){ this.checkgroup=this.datalist; }else{ this.checkgroup=[]; } }, handlelichange(){ if(this.checkgroup.length==this.datalist.length){ this.isallcheck=true; }else{ this.isallcheck=false; } }, getsum(){ var sum=0; for(var i in this.checkgroup){ sum+=this.checkgroup[i].number*this.checkgroup[i].price; } return sum; }, //商品数量加一 handleadd(data){ data.number++; }, //商品数量减一 handledel(data){ var number=data.number--; if(number==1){ data.number=1; } } } }) </script> </body> </html>