vuejs2实现全选和反选，不使用id

使用vuejs2实现全选和反选，其实网上都有很多的教程了，这一次我写，主要是使用index，而不是使用id，因为有些时候，如果数据传输过多，后端不会给id的，这时候，就需要使用index来进行全选的功能，其实都大同小异，大家可以根据自己的需求进行修改

github的项目地址：https://github.com/fengliting/vue-checked，如果喜欢给本文一个赞！

<div id="checked">

<div>选中了{{indexs.length}}条</div>

<table>

<tr>

<th><input type="checkbox" @click="checkAll" v-model="allChecked"></th>

<th>名字</th>

<th>年龄</th>

<th>体重</th>

</tr>

<tr v-for="(data,index) in list">

<td>

<input type="checkbox" :value="index" v-model="indexs">

</td>

<td>{{data.name}}</td>

<td>{{data.age}}</td>

<td>{{data.weight}}</td>

</tr>

</table>

</div>

<script>

var list = [{

name:'Mary',

age:17,

weight:54,

},{

name:'Away',

age:24,

weight:65,

},{

name:'Ali',

age:32,

weight:48,

},{

name:'Lili',

age:55,

weight:60,

}]

new Vue({

el:'#checked',

data:{

list:list,

// 全选的默认

allChecked:false,

indexs:[],

},

methods:{

checkAll:function(){

var _this = this;

// 如果为true的时候

if(!_this.allChecked){

_this.indexs = _this.list.map(function(json,index){

// console.log(json)

return index

})

}else {

_this.indexs = []

}

}

}

})

</script>