vue 循环勾选框_vue通过循环出来的购物车列表，计算复选框中选中的商品来计算的商品的总价...

vue中的购物车功能，通过循环将购物车列表循环出来，每个商品前都有一个单选按钮，怎样在循环中通过绑定一个事件，来计算选中的商品，计算选中商品的总价？

本文将介绍逻辑+具体代码

逻辑：

1.首先应该为循环出来商品列表的单选框绑定一个事件。2.点击单选框时，应该找到所有的单选框。3.需要在data中定义一个数组，用于存放选中商品的下表，(也就是循环商品列表的下标)。4.每次点击单选按钮的时候，就要获取该下标对应商品的选中状态，判断该单选状态是true还是false,如果是true 的话，就将该商品的下表添加到data中定义的数组中，否则，说明点击之前是选中状态，点击之后就是非选中的状态，就要将该商品下表从数组中删除，5。每次点击都要循环data中的数组，找到数组下表对应商品的单价以及数量，从而算出总价。

代码如下:

• type="checkbox" name="checked" class="cbox dx selBtn" @click="dx($event,item.id,item.proid,index2)">

  原价:￥{ {item.shopprice}}<