网创优客建站品牌官网
为成都网站建设公司企业提供高品质网站建设
热线:028-86922220
成都专业网站建设公司

定制建站费用3500元

符合中小企业对网站设计、功能常规化式的企业展示型网站建设

成都品牌网站建设

品牌网站建设费用6000元

本套餐主要针对企业品牌型网站、中高端设计、前端互动体验...

成都商城网站建设

商城网站建设费用8000元

商城网站建设因基本功能的需求不同费用上面也有很大的差别...

成都微信网站建设

手机微信网站建站3000元

手机微信网站开发、微信官网、微信商城网站...

建站知识

当前位置:首页 > 建站知识

VUE之购物车

我写了个简单的购物车如下!

创新互联建站专注于莘县网站建设服务及定制,我们拥有丰富的企业做网站经验。 热诚为您提供莘县营销型网站建设,莘县网站制作、莘县网页设计、莘县网站官网定制、成都小程序开发服务,打造莘县网络公司原创品牌,更为您提供莘县网站排名全网营销落地服务。

首先是商品列表:

这个数据先是假数据,以后再改正

好, 商品列表就写完了, 商品类,就三个属性!

我们重点看,添加到购物车的逻辑! addItem() 方法

当我们得到购物车的数据的时候,我们就开始将数组真正传递给购物车了!

一个传递,另外我们购物车组件就得接收!

Cart.vue

 

这个Cart.vue 中,我用到了,计算属性(计算总价格)

还用到了,如果得到元素在数组中的下标

还用到了,双向数据绑定!

我这个绑定就是绑定的 是否选中这个逻辑,我绑定到了,购物车中,商品的一个字段!

至于v-for 遍历时,key的绑定我选择了,商品的id 

行,上面还缺,一个商品类表那个组件的代码!

HelloWorld.vue

 

整体,就是 HelloWorld.vue 里面使用Cart.vue

gif动图我就不做了,以后我会下个工具做个动图:

 

 

 


本文标题:VUE之购物车
标题网址:http://bjjierui.cn/article/gdjppo.html

其他资讯