Vue实现购物车 发表于 2020-02-07 | 更新于: 2020-02-29 | 分类于 原创 字数统计: 1.4k字 | 阅读时长 ≈ 8分钟 主要实现的功能有:商品的单价,商品的总价,商品的单选和全选,商品数量的修改,商品的删除等功能。该小型项目采用Vue框架作为主要操作DOM的手段,代码完全原创实现效果如下: 123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147148149150151152153154155156157158159160161162163164165166167168169170171172173174175176177178179180181182183184185186187188189190191192193194195196197198199200201202203204205206207208209210211212213214215216217218219220221222223224225226227228229230231232233234235236237238239240241242243244245246247248249250251252253254255256257258259260261262263264265266267268269270271272273274275276277278279280281282283284285286287288289290291292293294295296297298299300301302303304305306307308309310311312313314315316317318319320321322323324325326327328329330331332333334335336337338339340341342343344345346347348349350351352353354355356357358359360361362363364365366367368369370371372<!DOCTYPE html><html> <head> <meta charset="utf-8" /> <meta name="viewport" content="width=device-width, initial-scale=1"> <title></title> <script src="js/vue.js" type="text/javascript" charset="utf-8"></script> <style type="text/css"> html { font-size: 100px; } body { font-size: 16px; } * { margin: 0; padding: 0; } li { list-style-type: none; } #box { margin-top: 0.4rem; } .shop-item { height: 1.3rem; display: flex; justify-content: space-between; align-items: center; background: rgb(252, 252, 252); margin-top: 0.1rem; position: relative; } .shop-item:nth-last-of-type(1){ margin-bottom: 0.6rem; } .shop-item { border: 0.01rem solid #e5e5e5; } .delete { height: 100%; width: 0.6rem; color: white; outline: none; background: rgb(221, 0, 27); border: none; } .delete:after { content: '删除'; } a:link { text-decoration: none; } .shop-item img { margin-left: 0.05rem; max-height: 0.8rem; max-width: 0.8rem; } .shop-item a { color: #3c3c3c; } .shop-name { font-size: 0.12rem; overflow: hidden; height: 0.5rem; } .shop-name a:hover { color: #f40; text-decoration: underline; } .size { color: #9c9c9c; font-size: 0.12rem; overflow: hidden; } .item-main { box-sizing: border-box; padding: 0 0 0 0.05rem; height: 0.8rem; width: 1.5rem; } .price { color: #3c3c3c; font-size: 0.12rem; font-weight: 700; font-family: Verdana, Tahoma, arial; } .count { outline: none; box-sizing: border-box; height: 0.25rem; line-height: 0.15rem; border: 0.01rem solid #aaa; color: #343434; width: 0.4rem; text-align: center; padding: 0.04rem 0.05rem; background-color: #fff; background-position: -0.75rem -3.75rem; float: left; } .reduce,.add { float: left; height: 0.25rem; width: 0.15rem; border: 0.01rem solid #e5e5e5; background: #f0f0f0; text-align: center; line-height: 0.23rem; color: #444; top: 0; outline: none; } #countbox { display: flex; flex-flow: nowrap; } .item-sum { text-align: center; color: #f40; font-size: 0.12rem; font-weight: 700; } .total .item-total { font-size: 0.12rem; color: #f40; font-weight: 700; right: 100px; } .head { height: 0.3rem; background: rgb(221, 0, 27); width: 100%; display: flex; justify-content: center; align-items: center; color: white; position: fixed; top: 0; z-index: 999; } .foot { z-index: 999; height: 0.5rem; background: #E5E5E5; width: 100%; display: flex; justify-content: space-between; align-items: center; color: white; position: fixed; bottom: 0; } .total { display: flex; flex-flow: nowrap; align-items: center; color: black; height: 100%; } .head:after { content: '购物车'; } .footse { align-items: center; margin-left: 0.1rem; display: flex; flex-flow: nowrap; } .foottext { color: black; font-size: 14px; white-space: nowrap; } .foottext:after { content: '全选'; } .submit { border: none; outline: none; height: 100%; width: 0.6rem; color: white; background: rgb(221, 0, 27); } .submit:after { content: '结算'; } .singleselect { margin-left: 0.1rem; } .nodata{ display: flex; margin: 0 auto; height: 3rem; width: 3rem; background-image: url(img/nodata02.png); background-repeat: no-repeat; justify-content: center; align-items: flex-end; background-size: cover; font-size: 14px; color: #6d757a; } .totaltxt{ padding-right: 0.1rem; } </style> </head> <body> <header> <div class="head"></div> </header> <div id="box"> <div v-if="items.length"> <main> <template v-for="(item,index) in items"> <div class="shop-item"> <input v-model="items[index].checked" type="checkbox" name="" class="singleselect" value="" /> <img :src="item.src"> <div class="item-main"> <div class="shop-name"><a href="#">{{item.name}}</a></div> <div class="size">{{item.size}}</div> </div> <div class="price">¥{{item.price}}</div> <div id="countbox"> <button type="button" @click="countReduce(index)" class="reduce">-</button> <input v-model="item.count" type="text" name="" class="count" value="" /> <button type="button" @click="countAdd(index)" class="add">+</button> </div> <div class="item-sum">¥{{item.price*item.count}}</div> <button type="button" v-on:click="bookRemove" class="delete"></button> </div> </template> </main> <footer> <div class="foot"> <div class="footse"> <input v-model="checked" @click="all" type="checkbox" name="" id="allselect" value="" /> <label for="allselect" class="foottext"></label> </div> <div class="total"> <div class="totaltxt"> <span style="font-size: 14px;white-space: nowrap;">合计:</span><span class="item-total">¥{{sum}}</span> </div> <button type="button" class="submit"></button></div> </div> </footer> </div> <div v-else> <main> <div class="nodata"> <p>你还暂时没有商品哦~</p> </div> </main> <footer> <div class="foot"> <div class="footse"> </div> </div> </footer> </div> </div> </body> <script type="text/javascript"> var app = new Vue({ el: '#box', data: { keywords:'', checked: false, items: [{ src: 'https://img.alicdn.com/bao/uploaded/i1/2200798231128/O1CN01OpBz5w1KCfK7ZIb5g_!!2200798231128.jpg_80x80.jpg', name: '优质舰队collection舰娘响手办响爷二次元动漫美少女机箱精品摆件', size: '尺寸:精品现货送海报', price: 79, count: 1, checked: false }, { src: 'https://img.alicdn.com/bao/uploaded/i3/1085315961/O1CN013r8Hhq1tuBWw3AoNp_!!0-item_pic.jpg_80x80.jpg', name: '【年货价】Razer雷蛇黑寡妇蜘蛛竞技幻彩版V2电竞游戏87机械键盘RGB背光吃鸡', size: '套餐类型:官方标配 颜色分类:87键(绿轴)', price: 749, count: 1, checked: false } ] }, mounted: function() {}, methods: { all: function() { if (!this.checked) { for (var i = 0; i < this.items.length; i++) { this.items[i].checked=true; } } else{ for (var i = 0; i < this.items.length; i++) { this.items[i].checked=false; } } }, countAdd: function(index) { this.items[index].count++; }, countReduce: function(index) { if (this.items[index].count == 1) { return; } this.items[index].count--; }, bookRemove: function() { for (var i = 0; i < this.items.length; i++) { this.items.splice(i, 1); } }, search:function(keywords){ var newList=[]; for(var i=0;i<this.items.length;i++){ if(this.items[i].name.indexOf(keywords)!==-1){ newList.push(this.items[i]) } } return newList } }, computed: { sum: function() { var total = 0; for (var i = 0; i < this.items.length; i++) { if(this.items[i].checked==true){ total += this.items[i].price * this.items[i].count;} } return total; } } }); </script></html> 打赏 微信支付 支付宝