购物车案例(2)

接购物车案例(1)
总结:怎么获取勾选商品,就是利用v-model双向数据绑定,绑定是数组,要求是必需要有value值

功能一:将勾选中的商品进行金额计算。
思路:计算数组checkgroup中的pricenumber的值加上下一个pricenumber的值的深度遍历,总金额计算,放在一个函数,然就其函数渲染出来

写法:购物车案例(2)
在getSum()函数里计算金额,函数计算状态改变后,会自动执行一次
购物车案例(2)
购物车案例(2)

功能二:实现全选功能,即选中,全部商品被勾选,未选中,全部商品不被选中。
思路:当商品中的双向数据绑定数组为空(vm.checkgroup=[]),商品不被选中;当绑定数组为商品数据(vm.checkgroup=datalist),商品被选中。

实现: 在其外面加一个选框,双向数据绑定一个布尔值,用来判断选框选中状态购物车案例(2)
在vue中写法
购物车案例(2)
购物车案例(2)
遇到问题:单选框未能根据商品选框状态进行实时更新购物车案例(2)

解决办法:在商品选框中加一个change事件购物车案例(2)
在事件中判断是否都勾选,都勾选时,checkgroup数组值不断改变,跟其datalist进行比较,将其两个数组长度进行比较;在vue写法购物车案例(2)
购物车案例(2)购物车案例(2)