多选框用来从备选的选项中选择任意多个，0个或者全部均可。
注意选择器(下拉选择框)也支持多选，相比与选择器，多选框的选项是全部显示在界面上的，而选择器需要点击下拉按钮才能显示全部选项。
2. 普通多选框普通多选框v-model绑定一个变量，变量的值为true/false分别对应选中/未选中，示例如下：
HTML代码：
普通多选框：
篮球
足球
JS代码：
checkedBasketball: true,
checkedFootball: false,
效果如下：
带边框的多选框样式更加富有科技感，但是用法是一样的。HTML代码部分添加border属性即可：
带边框的多选框:
篮球
足球
效果如下：
如果选项过多，每个多选框对应一个变量非常不方便，可以使用多选框组，统一绑定一个变量。变量的值即为选中项的label值的集合。
HTML代码：
多选框组，选中项{{checkList}}
篮球
足球
排球
JS代码：
checkList: ['basketball', 'football'],
效果如下：
可以将每个选项改为按钮样式，外观更加美观。
按钮样式多选框组
篮球
足球
排球
效果如下：
可以给多选框组设置最小、最大选中数量限制，这样可以不必通过js代码控制选中数量，更加简单。
当然实际上还是使用js控制更加灵活，我个人还是倾向于使用js代码。
HTML代码：
多选框组选中数量限制
篮球
足球
排球
JS代码：
checkList2: ['basketball'],
效果如下：
在实际项目中使用时，往往多选框的选项是根据后端发过来的数据决定的，是动态的，实例如下：
HTML代码：
动态生成选项，选中项{{courseSelected}}
{{item.name}}
JS代码：
courseAll: [{
id: 1,
name: "语文"
},
{
id: 2,
name: "数学"
}],
courseSelected: [],
效果如下：
建议使用多选框组，代码和逻辑更加清晰。
