vue 多层双层全选_vue2.0 实现全选和全不选

实现思路：

1、 v-model 一个收集所有input(除全选框外)数组checkModel ，vue会动态将其checked为true的input的value值存入数组checkModel里

2 、watch函数来监听checkModel 属性，当其长度==input元素时 全选按钮选中 否则取消

3 、全选按钮v-model checked 属性来显示当前选中状态 click事件里 当checked为true时 全选 所有input按钮被选中也就是checkModel的遍历存入其value值

html代码：

全选

• { {item.name}}--

  { {item.age}}--

  { {item.money}}元

  删除

js代码：

data(){

return {

list:[

{id:1,name:"明明",age:23,money:100},

{id:2,name:"红红",age:18,money:200},

{id:3,name:"强强",age:29,money:300}

],

checked:false, //是否全选

checkModel:[] //双向数据绑定的数组，我是用的id

}

},

watch:{

checkModel(){

if(this.checkModel.length==this.list.length){