vue实现列表显示隐藏以及全选和反选，小案例

视频↓

lihesheng.1iq.cn/vueShowFlag…

需求

思路：

首先我们创建vue的页面，定义数据，渲染数据到页面，点谁哪条数据的内容就显示，否
则不显示，点击全选按钮，所有的小复选框选中，点击小复选框全选直接选中，这里这
个小复选框可以使用监听来写，全选就直接操作所有小复选框的值就可以了。

效果

<template>
  <div class="about">
    <ul>
      <!-- 渲染所有的数据 -->
      <li v-for="val, i in arr" :key="i">
        <!-- 全选的按钮 -->
        <input type="checkbox" name="" id="" v-model="val.flag" @click="All(i,         val.flag)">
        <!-- 标题部分 /人员.项目.机构... -->
        <b @click="amend(i)">
          {{ val.name }}
        </b>
        <!-- 子目录数据  第三组01......-->
        <p v-for="it, index in val.children" :key="index" v-show="val.isOk">
          <!-- 复选框 -->
          <input type="checkbox" name="" id="" v-model="it.flag">
          <!-- 实际内容 -->
          {{ it.name }}
        </p>
      </li>
    </ul>
  </div>
</template>

<script>
export default {
  name: 'aboutIndex',
  data() {
    return {
      // 定义的arr 数据 
      arr: [
        {
          name: '人员',
          flag: false,
          isOk: false,
          children: [
            {
              name: '第一组01',
              flag: false,
            }, {
              name: '第一组02',
              flag: false,
            }, {
              name: '第一组03',
              flag: false,
            }, {
              name: '第一组04',
              flag: false,
            }, {
              name: '第一组05',
              flag: false,
            }
          ]
        }, {
          name: '项目',
          flag: false,
          isOk: false,
          children: [
            {
              name: '第二组01',
              flag: false,
            }, {
              name: '第二组02',
              flag: false,
            }, {
              name: '第二组03',
              flag: false,
            }, {
              name: '第二组04',
              flag: false,
            }, {
              name: '第二组05',
              flag: false,
            }
          ]
        }, {
          name: '机构',
          flag: false,
          isOk: false,
          children: [
            {
              name: '第三组01',
              flag: false,
            }, {
              name: '第三组02',
              flag: false,
            }, {
              name: '第三组03',
              flag: false,
            }, {
              name: '第三组04',
              flag: false,
            }, {
              name: '第三组05',
              flag: false,
            }
          ]
        }
      ]
    }
  },
  created() {
    console.log(this.arr);
  },
  // 监听
  watch: {
    // 监听arr数据如果发生改变就执行的代码
    arr: {
      handler() {
        // data中数据 循环出来 将当前这条数据的值修改为 子目录children 所有的数据如果选中就=true，false
        this.arr.forEach(res => {
          return res.flag = res.children.every((val) => {
            return val.flag === true
          })
        })
        // 开启深度监听
      }, deep: true
    }
  },
  methods: {
    // 显示隐藏切换 isOk 进行一个取反
    amend(i) {
      console.log(i);
      this.arr[i].isOk = !this.arr[i].isOk
    },
    // 全选部分   传递一个下标 和当前的值 让之间取反就可以了
    All(i, checkbox) {
      // console.log(i);
      // 获取当前行的数据 循环出来将当前的数据值进行取反
      this.arr[i].children.forEach(res => {
        return res.flag = !checkbox
      })
    }
  }
}
</script>

<style lang="scss" scoped>
ul {
  width: 500px;
  background-color: pink;
  margin: auto;

  li {
    width: 540px;
    background-color: aliceblue;
    margin-left: -40px;
  }
}
</style>