vue 实现全选

标签：false   list()   v-model   mode   UNC   cti   compute   val   htm   

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))
}
}
},
})

vue 实现全选

标签：false   list()   v-model   mode   UNC   cti   compute   val   htm   

原文地址：https://www.cnblogs.com/shenxinze/p/9186747.html