>本节讲解的内容对前面的章节具有依赖性,如果看起来有困难,请先看本系列前面的章节 ## 一、本节说明 在绝大多数的表单操作中,我们不只要收集文本输入的数据,我们还可能用到单选和多选。通常,实现单选和多选有以下的方式: * 第一种:input标签type=radio实现单选和type=checkbox实现的多选 * 第二种:select标签-option标签实现的单选与多选 这一节我们来讲解第一种方式实现的多选,及使用v-model指令数据绑定方法。 ## 二、 怎么做 ![](https://img.kancloud.cn/77/a1/77a18cb6c915ac8025abd763b59de63a_876x749.png) * 使用radio实现单选,v-model绑定的数据应该是同一个,这样实现单选选项之间的互斥 * 使用checkbox实现多选,v-model绑定的数据应该是同一个,这样多选的数据才属于同一个数组 ## 三、 效果(动态图片) ![](https://img.kancloud.cn/46/12/4612a09a607dbd6aec370966b127126a_492x268.gif) ## 四、 深入 怎样在单选或者多选选项显示,默认勾选一个或多个选项?只需要给定默认初始化数据即可 ![](https://img.kancloud.cn/40/62/406221f014662e436dd9b6d8c16192d6_412x89.png) 浏览器效果: ![](https://img.kancloud.cn/a7/85/a785de9a7a6bbce63f503852b62f3af5_451x255.png)