vue中实现全选反选

一、效果

二、代码

<template>
  <div class="shopping-car">
    <div>
      全选<input type="checkbox" v-model="checked" @change="checkAll">
    </div>
    <ul>
      <li v-for="(item,index) in list" :key="index">
        <input type="checkbox" v-model="item.checkModel" @change="checkBox(item)"/>
        <span>{{item.name}}</span>
      </li>
    </ul>
  </div>
</template>

<script>
export default {
  data() {
   return{
     list:[{
      id:1,
      name:"西瓜啵啵",
     },
     {
      id:2,
      name:"椰子汁",
     },
     {
      id:3,
      name:"生打椰椰冻",
     },
     {
      id:4,
      name:"竹生空野",
     }],
     checkModel:[],
     checked:false
   }

  },
  methods:{
      checkAll() {
					// 触发全选按钮事件
					// 1.获取下面所有的需要选中的复选框
					// 2.如果全选选中，则给每一个复选框设上checked:true的状态
					// 3.如果全选没选中，则给每一个复选框设上checked:false的状态
					if(this.checked) {
						this.list.forEach((item) => {
							item.checkModel = true
						})
 
					} else {
						this.list.forEach((item) => {
							item.checkModel = false
						})
					}
          
				},
				checkBox(item) {
					// 1.获取总复选框数量
					// 2.循环遍历如果每个复选框都为true，则全选选中
					if(this.list.every(item => item.checkModel)) {
						// 3.全选按钮选中
						this.checked=true
					} else {
						// 4.全选按钮不选中
						this.checked=false
					}
				}
  }

};
</script>
<style lang="less" scoped>
.shopping-car {
  ul {
    list-style: none;
    border: 2px dotted pink;
    padding: 6px;
    li{
      display: flex;
      align-items: center;
      margin-bottom: 10px;
      input{
        margin-right: 10px;
      }
    }
  }
}
</style>