扫二维码与项目经理沟通
我们在微信上24小时期待你的声音
解答本文疑问/技术咨询/运营咨询/技术建议/互联网交流
我写了个简单的购物车如下！
创新互联建站专注于莘县网站建设服务及定制，我们拥有丰富的企业做网站经验。 热诚为您提供莘县营销型网站建设，莘县网站制作、莘县网页设计、莘县网站官网定制、成都小程序开发服务，打造莘县网络公司原创品牌,更为您提供莘县网站排名全网营销落地服务。
首先是商品列表：
这个数据先是假数据，以后再改正
好， 商品列表就写完了， 商品类，就三个属性！
我们重点看，添加到购物车的逻辑！ addItem() 方法
当我们得到购物车的数据的时候，我们就开始将数组真正传递给购物车了！
一个传递，另外我们购物车组件就得接收！
Cart.vue
| 选中 | 商品名称 | 价格 | 数量 | 单品总价 | 操作 |
|---|---|---|---|---|---|
| {{c.name}}
| {{c.price}} |
{{c.count}}
| {{c.count * c.price}} |
|
| 总价格 | {{getTotal}} | ||||
这个Cart.vue 中，我用到了，计算属性（计算总价格）
还用到了，如果得到元素在数组中的下标
还用到了，双向数据绑定！
我这个绑定就是绑定的 是否选中这个逻辑，我绑定到了，购物车中，商品的一个字段！
至于v-for 遍历时，key的绑定我选择了，商品的id
行，上面还缺，一个商品类表那个组件的代码！
HelloWorld.vue
{{g}} --{{g.name}}
整体，就是 HelloWorld.vue 里面使用Cart.vue
gif动图我就不做了，以后我会下个工具做个动图：
我们在微信上24小时期待你的声音
解答本文疑问/技术咨询/运营咨询/技术建议/互联网交流
微信二维码
移动版官网