<!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>