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

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

首先是商品列表：

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

好， 商品列表就写完了， 商品类，就三个属性！

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

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

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

Cart.vue

 

这个Cart.vue 中，我用到了，计算属性（计算总价格）

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

还用到了，双向数据绑定！

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

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

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

HelloWorld.vue

 

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

gif动图我就不做了，以后我会下个工具做个动图：

 

 

 

文章名称：VUE之购物车
文章分享：http://chengdu.cdxwcx.cn/article/gdjppo.html