Vue前端开发快速入门-教你写一个完整的购物车

vue前端开发快速入门|前端开发者

用vuejs来写一个购物车。下面我就从全选,数量控制器,运费,商品金额计算等方法来演示一下一个能用在实际场景的购物车是怎么做出来的以及记录一下这次用vuejs踩过的坑。

1.一层数据结构-全选

下面这段代码和vuejs官网里面checkbox绑定很像。不明白的可以直接上vuejs官网看看。

html 代码

2.二层数据结构-全选

一层数据结构的购物车在现实中是很少看到的,比如我们最熟悉的淘宝购物车是按照店铺分的,那么必然是多层的数据结构。这次在写这个二层数据接口的全选,碰到一个很大的坑,一开始我是用了一层数据结构的数据,发现当对象数组里面的某个值改变了,视图竟然没有触发!,所以会造成下面所有的checkbox都被选中了,最上面的那个全选checkbox竟然还是没有被选中。感觉告诉我这是vuejs的坑,后来发现是js的坑。具体可以看这个$set。方法是百度到了,可是放我这里没有用(应该是版本问题)。于是我就改了数据结构。

html 代码

3.一层数据结构-数量选择器

html 代码

4.二层数据结构-数据选择器

html 代码

5.一个完整的购物车

html 代码

vue前端开发快速入门|前端开发者

https://www.rokub.com

» 本文来自:前端开发者 » 《Vue前端开发快速入门-教你写一个完整的购物车》
» 本文链接地址:https://www.rokub.com/2839.html
» 您也可以订阅本站:https://www.rokub.com
赞(0)
64K

评论 抢沙发

评论前必须登录!