这篇文章主要为大家详细介绍了基于vue.js实现购物车，文
本文来源gaodai.ma#com搞##代!^码网(中示例代码介绍的非常详细，具有一定的参考价值，感兴趣的小伙伴们可以参考一下
本文实例为大家分享了vue.js实现购物车的具体代码，供大家参考，具体内容如下
template
<div class="all"> <div class="head"> <span>购物车</span></div><ul class="menu"> <li class="li"> <label for="all"></label> 全选 </li><li class="li">商品代码</li><li class="li">商品名称</li><li class="li">商品单价</li><li class="li">商品数量</li><li class="li">商品库存</li><li class="li">商品小计</li></ul><div> <ul class="menu"> <li class="li"> </li><li class="li">{{data.code}}</li><li class="li">{{data.name}}</li><li class="li">￥{{data.price}}</li><li class="li"> <div>-</div><div>+</div></li><li class="li">{{data.stock}}</li><li class="li">￥{{data.number*data.price}}</li></ul></div><div class="info"> <p>{{commodityNumber}}件商品</p><p>总计：<span>￥{{numberAll}}</span></p></div></div>
script
css
ul, li { list-style: none; } .all { width: 800px; height: 500px; background: #fff; border: 1px solid #177ecb; margin-left: 300px; .head { background: #177ecb; height: 36px; line-height: 36px; color: #fff; padding-left: 15px; } .menu { height: 32px; width: 100%; border-bottom: 1px solid #d4d4d4; padding: 0 15px; display: flex; .li { line-height: 32px; flex: 1; border-right: 1px solid #d4d4d4; text-align: center; input[type="number"] { width: 40px; display: inline-block; height: 20px; } div { width: 20px; height: 20px; padding: 0; display: inline-block; background: #333; color: #fff; line-height: 20px; text-align: center; cursor: pointer; } div:active { background: #999; } } .li:nth-of-type(3) { flex: 2; } .li:last-child { border: 0; } } .menu + div { height: 350px; margin-bottom: 20px; border-bottom: 1px solid #177ecb; } .info { text-align: right; margin-right: 20px; span { color: #f00; font-size: 20px; font-weight: 900; } } }
以上就是基于vue.js实现购物车的详细内容，更多请关注gaodaima搞代码网其它相关文章！
搞代码网（gaodaima.com）提供的所有资源部分来自互联网，如果有侵犯您的版权或其他权益，请说明详细缘由并提供版权或权益证明然后发送到邮箱[email protected]，我们会在看到邮件的第一时间内为您处理，或直接联系QQ：872152909。本网站采用BY-NC-SA协议进行授权
转载请注明原文链接：基于vue.js实现购物车
转载请注明原文链接：基于vue.js实现购物车
