VUE之购物车

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

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

首先是商品列表:

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

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

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

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

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

Cart.vue

 

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

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

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

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

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

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

HelloWorld.vue

 

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

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

 

 

 


本文标题:VUE之购物车
网站地址:http://myzitong.com/article/gdjppo.html