vue 实现全选

html:

<p><input type="checkbox" v-model="allSelect"><span>全选</span></p>
<ul class="dataList">
<li v-for="item,index in getDataList" :key="index">
<input type="checkbox" v-model="item.show" />
<span v-text="item.cont"></span>
</li>
</ul>
<p>{{getDataList}}</p>

js:

new Vue({
el: '.app',
data: {
dataList: [
{
cont: 111,
},
{
cont: 222,
},
{
cont: 333,
},
{
cont: 444,
},
{
cont: 555,
}
]
},
computed: {
getDataList(){
return this.dataList.map(item=>{
this.$set(item,'show',false)
return item
})
},
allSelect: {
get: function(){
return this.getDataList.every(item=>item.show)
},
set: function(newValue){
this.dataList.map(item=>this.$set(item,'show',newValue))
}
}
},
})