这篇文章主要讲解了vue实现购物车功能的方法,内容清晰明了,对此有兴趣的小伙伴可以学习一下,相信大家阅读完之后会有帮助。
成都创新互联公司专注于行唐企业网站建设,成都响应式网站建设公司,商城开发。行唐网站建设公司,为行唐等地区提供建站服务。全流程按需定制开发,专业设计,全程项目跟踪,成都创新互联公司专业和态度为您提供的服务
new Vue({ el: "#app", data: { cIndex: 0, lists: [ { title: "推荐商品", goods: [ { id: 0, img: './images/goods.png', name: '散称樱桃1', price: '10.00', num: 0 }, { id: 1, img: './images/goods.png', name: '散称樱桃1', price: '10.00', num: 0 } ] }, { title: "推荐商品", goods: [ { id: 2, img: './images/goods.png', name: '散称樱桃2', price: '20.00', num: 0 }, { id: 3, img: './images/goods.png', name: '散称樱桃2', price: '20.00', num: 0 }, ] }, ], carArr: [], appearCar: false, }, computed:{ alltotal:function () { var alltotal = 0; var allNum = 0; for(var i = 0,len = this.lists.length;i
html页面
扫码
- {{item.title}}
{{item.name}}
¥{{item.price}}
{{item.num}}已选商品 清空
{{item.name}}¥{{item.price}}{{item.num}}
看完上述内容,是不是对vue实现购物车功能的方法有进一步的了解,如果还想学习更多内容,欢迎关注创新互联行业资讯频道。