问题出现场景：

电商小程序的购物车页面，当选中某一个店铺时，该店铺中所有的商品都要选中，取消店铺的选中时，店铺中的所有商品都要取消选中。

html结构

checkbox是多选框，具体样式是方形的，为了能够实现圆形，可以在checkbox组件外面的标签中添加checkbox-round的class样式。

<checkbox :checked="shop.checked" style="transform:scale(0.7)" @click="selectShop($event,shop)"/>

解释一下：

1. checked 根据shop.checked参数来展示选中或者未选中
2. style是行间样式，圆圈缩小为原来的0.7
3. click监听复选框的点击事件，默认的第一个参数都是e，就是点击事件本身，第二个参数可以传递数据

selectShop(e,obj){// e代指点击事件本身，obj就是传递的参数。const checked = !obj.checked;for (let i in obj.list) {obj.list[i].forEach(item => {if (item.specSelected[0].stock) {item.checked = checked;} else {item.checked = false;}})}//  此处通过this.$delete先删除对象中的某个参数，然后再通过this.$set进行赋值，才能够实现视图渲染this.$delete(obj,'checked');this.$set(obj,'checked',checked);for (let i in this.shopList) {this.shopList[i].shoppingCartVoList.every(item2 => {if(!item2.checked){this.allChecked = false;return true;}else{this.allChecked = true;}})}this.calcTotal();
},

知识点如下：

视图渲染问题

在vue的使用过程中，如果需要修改视图中的某个值，一般可以通过直接赋值来实现。
如果针对的是对象中的某个值，可以通过this.$set()的方式来处理。

this.$set()赋值后视图不渲染

this.$set(obj,'checked',true);这段代码的意思就是：将obj对象中的checked参数更改为true.
但是视图并没有发生改变。

this.$delete()解决this.$set()视图不渲染的问题

百度一番后，发现可以通过this.$delete()先将对象中的某个值删除，然后再通过this.$set()的方式来进行赋值，即可达到视图渲染的效果。