vue全选和反选

时间:2021-10-21 10:48:53

<!DOCTYPE html>
<html>
<head>
<title>选择</title>
<script type="text/javascript" src="vue.js"></script>
</head>
<body>
<div id="box">
<ul>
  <li v-for="(index,item) in arr" >
    <input type="checkbox" :value="index" v-model="checkedNames" />{{item}}
  </li>
</ul>
<div>全选/反选<input type="checkbox" @click="quan" /></div>
{{checkedNames}}
</div>
<script type="text/javascript">
var vm=new Vue({
  el:"#box",
  data:{
  arr:['apple','orange','pear','banana'],
  checkedNames:[]
},
methods:{
quan(e){
  if(e.target.checked){
     let arr1=this.arr;
     this.checkedNames=[];
     arr1.forEach((item,index)=>{ this.checkedNames.push(index);console.log(item+"=>"+index) })

  }else{
     this.checkedNames=[]
  }
 }
}
})
</script>
</body>
</html>