用prop实现html中的多选框全选

HTML代码：

<input type="checkbox" id="selectAll" />全选
<br />
<input type="checkbox" class="checkbox" />选项1
<br />
<input type="checkbox" class="checkbox" />选项2
<br />
<input type="checkbox" class="checkbox" />选项3

JavaScript代码：

var app = new Vue({
  el: '#app',
  data: {
    selectedAll: false,
    checkboxes: []
  },
  methods: {
    selectAll: function() {
      this.checkboxes = this.selectedAll ? ['1', '2', '3'] : [];
    }
  },
  watch: {
    checkboxes: function(val) {
      this.selectedAll = val.length === 3;
    }
  }
});

解释：

- 使用Vue实例来绑定HTML中的元素
- 使用v-model指令将多选框的值绑定到Vue实例中的一个数组
- 使用一个全选的复选框，将其值绑定到Vue实例中的一个布尔值
- 使用computed属性来计算全选的复选框是否应该被选中
- 使用watch属性来监听多选框的值的变化，当全部选中时，全选的复选框也应该被选中