vue组件 全选全不选反选

方法：v-model 与 [{checked:true},…]

App.vue

<!-- 请使用Vue实现复选框全选、反选、全不选的功能。 -->
 <template>
     <button @click="checkNone()">全不选</button>
     <button @click="checkAll()">全选</button>
     <button @click="checkAnti()">反选</button>
     <br>
     <aaaa ref="select"></aaaa><br />
 </template>

 <script setup>
     import aaaa from './components/select.vue'
 </script>

 <script>
     export default {
         name: 'App',
         data() {
             return {

             }
         },
         methods: {
             checkNone() {
                 this.$refs.select.inputArr.forEach(item => {
                     item.checked = false;
                 });
             },
             checkAll() {
                 this.$refs.select.inputArr.forEach(item => {
                    item.checked = true;
                 });
             },
             checkAnti() {
                 this.$refs.select.inputArr.forEach(item => {
                     item.checked = !item.checked;
                 });
             }
         }
     }
 </script>

 

Select.vue

 

<template>
    <!-- v-for 用for循环打印出来其单位-->
    <div v-for="item in inputArr">
      {{item.text}} : <input type="checkbox" value="" v-model="item.checked">
    </div>
    <br>
</template>

<script>
    export default {
        name: "select",
        data() {
            return {
            inputArr: [
              { text: '足球', checked: true },
              { text: '篮球', checked: false },
              { text: '羽毛球', checked: false },
              { text: '游泳', checked: false },
                ],
            }
        }
    }
</script>