vue中input多选_vue的多层input checkbox全选，全不选

提要：项目中之前都是一层checkbox选择，书写比较简单。这次项目中遇到了多层。虽说逻辑不复杂，但是书写中也遇到问题，并且对watch有新的理解。本文不啰嗦css和布局内容。主要描述双向绑定和数据的获取。

第一步：看静态页面最终效果图和HTML结构布局。

图一说明：点击灰色背景区域的父级地址名称，紧邻的下方白色背景的子集订单被选中。点击全选按钮所有checkbox都选中。

图2.3说明：图2是双层v-for循环。每个子集的input绑定了相同的v-model值。并且绑定了value值。图三绑定了v-modell并且绑定了事件change.

第二步：数据data声明和重构。

因为我们的子集v-model值是动态生成的，所以我们再请求到列表数据todolist以后需要对dataModel进行结构重组。可以把每个子集列表绑定的value值对应放入dataModel中。

重组代码如下：

var len =this.todolist.length;for (var i = 0; i < len; i ++) {var item1 ={value1: []};

this.dataModel.push(item1);

}

第三步，监听dataModel中双向绑定的数据变化，通过变化去控制父级是否选中，全选是否选中，选中的