摘要：
'check':'']"˃exportdefault{methods:{//点击全选和反选getAllChecked(){letflag=!this.allCheck}}}我们发现每个商品都选中了才会变为全选，反之有一个商品没有选中，则不是全选状态。
1、查看代码发现选中全选是由 check 样式控制的，所以我们要添加一个变量来控制是否全选：
<span :class="['checkbox-btn', 'item-check-btn', allCheck ? 'check' : '']"> <script>export default{ data() { return{ allCheck: false, //是否全选 } }, } </script>
2、给全选添加点击事件：
<a href="javascipt:;"@click="getAllChecked"> <span :class="['checkbox-btn', 'item-check-btn', allCheck ? 'check' : '']"> <script>export default{ methods: { //点击全选和反选 getAllChecked() { let flag = !this.allCheck } } } </script>
我们发现每个商品都选中了才会变为全选，反之有一个商品没有选中，则不是全选状态。
3、这里我们可以用计算属性来定义 allCheck ：
//计算属性 computed: { allCheck() { //every 当数组中每一项都返回 true，整体才返回 true；有一项返回 false，整体就返回 false return this.cartList.every(item =>{ returnitem.checked }) } }
注意：上面 data 里的 allCheck 变量记得注释掉，改用计算属性。
4、继续getAllChecked() 方法：
//点击全选和反选 getAllChecked() { let flag = !this.allCheck this.cartList.forEach(item =>{ item.checked =flag }) },
这时点击全选就可以全部选中商品，反之则全部没选中。
5、同时选中商品时计算总价
同样定义计算属性，计算选中商品的价格总计：
<div class="item-total">总价: <span class="total-price">{{ totalPrice | curreney }}</span> </div> <script>export default{ //计算属性 computed: { //总价 totalPrice() { let money = 0 this.cartList.forEach(item =>{ if(item.checked) { money +=item.productNum *item.productPrice } }) returnmoney } } } </script>
此时选中商品或改变商品数量，对应的总价随之改变。