<template>

  <div class="hello">

    <table>

        <tr>

            <th><input type="checkbox" v-model="selectAll"></th>

            <th align="left">Name</th>

        </tr>

        <tr v-for="user in users">

            <td>

                <input type="checkbox" v-model="selected" :value="user.id" number>

            </td>

            <td>{{ user.name }}</td>

        </tr>

    </table>

    <!-- 下面是热身测试 -->

    <hr><br><br>

    <input type="checkbox" v-model="flag"><br>

    <input type="checkbox" v-model="arr" value="1">

    <input type="checkbox" v-model="arr" value="2">

    <input type="checkbox" v-model="arr" value="3">

  </div>

</template>

<script>

export default {

  name: "HelloWorld",

  data() {

    return {

      users: [

        { id: "1", name: "Shad Jast", email: "pfeffer.matt@yahoo.com" },

        { id: "2", name: "Duane Metz", email: "mohammad.ferry@yahoo.com" },

        { id: "3", name: "Myah Kris", email: "evolkman@hotmail.com" },

        { id: "4", name: "Dr. Kamron Wunsch", email: "lenora95@leannon.com" }

      ],

　　　selected: [],

　　　// ** 下面是热身的  **

      flag: true,

      arr: ["1"]

    };

  },

  methods: {},

  computed: {

    selectAll: {

      get: function() {

        return this.users ? this.selected.length == this.users.length : false;

      },

      set: function(value) {

        var selected = [];

        if (value) {

          this.users.forEach(function(user) {

            selected.push(user.id);

          });

        }

        this.selected = selected;

      }

    }

  }

};

</script>