使用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的全选和多个的删除功能,希望对大家有所帮助,如果大家有任何疑问请给我留言,小编会及时回复大家的。在此也非常感谢大家对毛票票网站的支持!