datas : [
 {
 //用于判斷是否展示子列表
 isShowListItem : false,
 //用于記錄選中了哪些子項
 selected : [],
 //父標(biāo)題
 listTitle : "保利南悅灣",
 //子列表
 listItem : [
 {
 id : 1,
 name : "李小龍"
 },
 {
 id : 2,
 name : "周星馳"
 },
 {
 id : 3,
 name : "周杰倫"
 }
 ]
 },
 {
 isShowListItem : false,
 selected : [],
 listTitle : "南莊萬科城",
 listItem : [
 {
 id : 4,
 name : "大魔王"
 },
 {
 id : 5,
 name : "老妖怪"
 }
 ]
 }
]

<input 
type="checkbox"
:value="item.id"
v-model="data.selected"
>

<input :id="data.listTitle"
 class="list-input"
 type="checkbox"
 :checked="isTitleChecked(data)"
 @change="changeTitleChecked(data,$event)"
>

/**
* 當(dāng)父標(biāo)題狀態(tài)變化時的處理方法
* @param data [當(dāng)前項的data]
* @param event [當(dāng)前項的event]
*/
changeTitleChecked : function (data,event) {
 if (event.target.checked === true) {
 data.listItem.forEach(function (item) {
 data.selected.indexOf(item.id) === -1 && data.selected.push(item.id);
 })
 }else {
 data.selected = [];
 }
}

/**
* 判斷父標(biāo)題選擇狀態(tài)
* @param data [當(dāng)前項的data]
* @returns {boolean}
*/
isTitleChecked : function (data) {
 var _selected = data.selected;
 var _listItem = data.listItem;
 // 驗證selected中是否含有全部的item的id 如果是 證明title要選中
 return _listItem.every(function (item) {
 return _selected.indexOf(item.id) != -1;
 });
}

<input id="all-checked"
 type="checkbox"
 :checked="isAllChecked()"
 @change="changeAllChecked($event)"
>

/**
* 全選框change事件的回調(diào)處理方法
* @param event 
*/
changeAllChecked : function (event) {
 if (event.target.checked === true) {
 this.datas.forEach(function (data) {
 data.listItem.forEach(function (item) {
 data.selected.indexOf(item.id) === -1 && data.selected.push(item.id);
 })
 })
}else {
 this.datas.forEach(function (data) {
 data.selected = [];
 })
 }
}

/**
* 判斷全選框選擇狀態(tài)
* @returns {boolean}
*/
isAllChecked : function () {
 return this.datas.every(function (data) {
 return data.selected.length === data.listItem.length;
 });
}