VUE实现全选和单选

效果图：

单选	全部选中

HTML代码：

 <div class="hello">
    <div>
    　　<input type="checkbox" id="allCheck" @click="checkAll" v-model="checkIsAll">
    　　<label for="allCheck">全选</label>
    </div>
    <ul>
    　　<li v-for="(item,index) in listData" :key="index">
    　　　　<input type="checkbox" v-model="checkModel" :id="item.id" :value="item.name">
    　　　　<label :for="item.id">{{item.name}}</label>
    　　</li>
    </ul>
    <div>显示已选择项checkModel： {{checkModel}}</div>
  </div>

JS代码：

export default {
  name: 'HelloWorld',
  data(){
　　return {
　　　　listData:[
　　　　　　{id:12001,name:"苹果"},
　　　　　　{id:12002,name:"香蕉"},
　　　　　　{id:12003,name:"梨子"}
　　　　],
　　　　checkIsAll:false, //是否全选
　　　　checkModel:[] //双向数据绑定的数组
　　}
  },
  watch:{
      //监听数据绑定数组变化
  　　checkModel(){
  　　　　if(this.checkModel.length==this.listData.length){
  　　　　　　this.checkIsAll=true;
  　　　　}else{
  　　　　　　this.checkIsAll=false;
  　　　　}
  　　}
  },
  methods:{　　
      //点击全选按钮时，判断全选是选中还是未选中状态
  　　checkAll(){
  　　　　if(this.checkIsAll){
  　　　　　　this.checkModel=[];
  　　　　}else{
            //用foreach循环数组
            this.listData.forEach((item,index)=>{
              //返回指定字符在字符串中第一次出现处的索引，如果此字符串中没有这样的字符，则返回 -1。
            　if(this.checkModel.indexOf(item.name)==-1){
                  //向数组checkModel末尾追加id或者name,id或name保持和input的value一致即可
            　　　this.checkModel.push(item.name)   
            　  }
            })
  　　　　}
  　　}
  }
}