基于vue.js实现购物车
本文实例为大家分享了vue.js实现购物车的具体代码,供大家参考,具体内容如下
template
购物车
-
+
{{commodityNumber}}件商品
总计:¥{{numberAll}}
本文实例为大家分享了vue.js实现购物车的具体代码,供大家参考,具体内容如下
template
购物车
{{commodityNumber}}件商品
总计:¥{{numberAll}}
script
css
ul, li{ list-style:none; } .all{ width:800px; height:500px; background:#fff; border:1pxsolid#177ecb; margin-left:300px; .head{ background:#177ecb; height:36px; line-height:36px; color:#fff; padding-left:15px; } .menu{ height:32px; width:100%; border-bottom:1pxsolid#d4d4d4; padding:015px; display:flex; .li{ line-height:32px; flex:1; border-right:1pxsolid#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:1pxsolid#177ecb; } .info{ text-align:right; margin-right:20px; span{ color:#f00; font-size:20px; font-weight:900; } } }
以上就是本文的全部内容,希望对大家的学习有所帮助,也希望大家多多支持毛票票。
声明:本文内容来源于网络,版权归原作者所有,内容由互联网用户自发贡献自行上传,本网站不拥有所有权,未作人工编辑处理,也不承担相关法律责任。如果您发现有涉嫌版权的内容,欢迎发送邮件至:czq8825#qq.com(发邮件时,请将#更换为@)进行举报,并提供相关证据,一经查实,本站将立刻删除涉嫌侵权内容。