vue 计算属性，实现复选框的全选和反选 【小案例】

vue 计算属性的完整写法

计算属性的完整写法是：

computed:{
    计算属性名:{
        get(){
           // 代码逻辑和操作
           return 结果
        },
        set(修改的值){
           // 代码逻辑和操作
        }
    }
}

全选和反选小案例

思路：首先每个项的复选框绑定到数据上，然后复选框全部选中，则全选复选框被选中。

同理全选复选框的点选取消也会影响单个的复选框被选中还是取消。

然后只需要利用计算属性（计算属性绑定到全选上），来计算每一项是否复选框都被选择，若是则将全选按钮选中。显然这是一个计算属性的get。

点选全选复选框，从而决定单个的复选框被选中还是取消，只需要在计算属性的set时，将每一项遍历然后修改其选中状态。

 <style>
   .box {
       width: 500px;
       height: 500px;
       margin: 20vh auto;
   }

   th,
   tr,
   td {
       border: 1px solid black;
       width: 100px;
   }
style>
<div id="app" class="box">
      <table>
          <tr>
              <th>操作th>
              <th>idth>
              <th>姓名th>
          tr>
          <tr v-for="(item,index) in userList" :key="item.id">
              <td><input type="checkbox" v-model="item.isChecked">td>
              <td>{{item.id}}td>
              <td>{{item.name}}td>
          tr>
          <tr>
              <td colspan="3"><input type="checkbox" v-model="isCheckAll">全选td>
          tr>
      table>
  div>

  <script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js">script>

  <script>
      const app = new Vue({
          el:'#app',
          data:{
              userList:[
                  {id:1001,name:'张三',isChecked:true},
                  {id:1002,name:'李四',isChecked:false},
                  {id:1003,name:'王五',isChecked:false}
              ]
          },
          computed:{
              isCheckAll:{
                  // get 通过所有复选框选中，然后自动选中全选按钮
                  get(){
                      return this.userList.every(item=>item.isChecked===true)
                  },
                  // set 根据手动选中全选，实现所有复选框的选中和取消
                  set(newStatus){
                      // newStatus 为当前全选复选框的状态，true || false
                      this.userList.forEach(item=>item.isChecked=newStatus)
                  }
              }
          }
      })
  script>

效果图：

---