SOURCE

console 命令行工具 X clear

                    
>
console
var that;
var app = new Vue({
  el: '#app',
  data() {
    return {
        //列表
      list:[
          {
              id:1,
              name:'列表1'
          },
          {
              id:2,
              name:'列表2'
          },
          {
              id:3,
              name:'列表3'
          },
          {
              id:4,
              name:'列表4'
          },
      ],
      check:false,
      //选中的列表
      carList:[]
    }
    
  }, 
  methods: {
      getCar(){
          if(this.check == true){//全选
          //先取消所有已选中的列表
          this.carList = []
          //将所有列表塞到新数组
              this.list.map((item) =>{
             this.carList.push(item.id) 
           });
              console.log('全选',this.carList)
          }else{//取消全选
              this.carList = []
              console.log('取消全选')
          }
      }
  }
  
});
<div id="app">
    <input type="checkbox" v-model="check" @change="getCar">
    <span v-if="check">取消全选</span>
    <span v-else>全选</span>
    <div>选中的元素:{{carList}}</div>
 <div v-for="(item,index) in list" :key="index">
     <span>{{item.name}}</span>
     <input type="checkbox" :value="item.id" v-model="carList">
 </div>
</div>

本项目引用的自定义外部资源