使用vue.js实现checkbox的全选和多个的删除功能
template代码：
<template>
<divclass="hello">
<ul><liv-for="(item,index)inproData">
<labelfor="">
<inputtype="checkbox":value="index"v-model="selectArr">
</label>{{item.name}}
</li>：
</ul>
<buttontype=""@click="del">删除</button>{{selectArr}}
<label>
<inputtype="checkbox"class="checkbox"@click="selectAll"/>全选
</label>
</div>
</template>
script部分：
<script>
varproData=[{
"name":"j1ax"
},{
"name":"j2ax"
},{
"name":"j3ax"
},{
"name":"j4ax"
}]
exportdefault{
name:'hello',
data(){
return{
proData:proData,
selectArr:[]
}
},
created(){
this.$http.get('/api/home').then(function(response){
response=response.body;
this.proData=response.data;
})
},
methods:{
del(){
letarr=[];
varlen=this.proData.length;
for(vari=0;i<len;i++){
if(this.selectArr.indexOf(i)>=0){
console.log(this.selectArr.indexOf(i))
}else{
arr.push(proData[i])
}
}
this.proData=arr;
this.selectArr=[]
},
selectAll(event){
var_this=this;
console.log(event.currentTarget)
if(!event.currentTarget.checked){
this.selectArr=[];
}else{//实现全选
_this.selectArr=[];
_this.proData.forEach(function(item,i){
_this.selectArr.push(i);
});
}
}
}
}
</script>
以上所述是小编给大家介绍的使用vue.js实现checkbox的全选和多个的删除功能，希望对大家有所帮助，如果大家有任何疑问请给我留言，小编会及时回复大家的。在此也非常感谢大家对毛票票网站的支持！