重庆分公司,新征程启航
为企业提供网站建设、域名注册、服务器等服务
这篇文章给大家分享的是有关Vue商品控件与购物车联动效果怎么实现的内容。小编觉得挺实用的,因此分享给大家做个参考,一起跟随小编过来看看吧。
做网站、网站制作,成都做网站公司-成都创新互联已向超过千家企业提供了,网站设计,网站制作,网络营销等服务!设计与技术结合,多年网站推广经验,合理的价格为您打造企业品质网站。
示例:构建商品控件与购物车联动
商品控件
商品控件的结构编写
在商品组件的标签内完成项目结构,以及数据,事件的绑定,与判断逻辑的书写。
{{container.tag_name}}
{{item.name}}
{{item.name}}
{{food.name}}
{{food.description}}
{{food.month_saled_content}} {{food.praise_content}}¥{{food.min_price}} /{{food.unit}}
Shopcart组件是Goods组件的子组件,在Shopcart组件初始化的时候我们可以传入给其参数poiInfo selectFoods.
请求数据,声明方法与计算属性
定义商品组件的样式
商品数量控制组件
这里用了vue动画
cart-decrease
类为商品数量减少结构。 使用指令v-show
控制其显隐。有商品数量的时候会按照规定动画进行显示,反之则隐藏。
cart-count类为选中的商品数量。
cart-add类为商品数量增加结构。
通过vue全局api set进行第一次点击增加商品按钮时候的设置。
https://cn.vuejs.org/v2/api/#... {{food.count}}
购物车组件
我们现在创建shopcart购物车组件。
0}">0}"> 0}"> {{totalCount}}¥{{totalPrice}}
0}">另需{{shipping_fee_tip}}
0}">{{payStr}}
感谢各位的阅读!关于“Vue商品控件与购物车联动效果怎么实现”这篇文章就分享到这里了,希望以上内容可以对大家有一定的帮助,让大家可以学到更多知识,如果觉得文章不错,可以把它分享出去让更多的人看到吧!