Vue利用v-model获取不同类型表单数据的方式

1. 文本框
   【直接利用v-model获取输入框的值】

   <!-- username存储的是输入框中的字符串 -->
   <input type="text" v-model="username">
   

2. 单选框
   【需要给每个单选框设置唯一的value值，之后通过v-model获取被选中的那个value】

   <!-- sex属性存储的是被选中单选框的value值 -->
   <input type="radio" name="gender" value="man" v-model="sex">男
   <input type="radio" name="gender" value="woman" v-model="sex">女
   

3. 复选框
   ① 不设置value值，v-model获取的是boolean类型

   <!-- isAgree属性存储的是该复选框的选中情况 -->
   <input type="checkbox" v-model="isAgree">是否同意
   

   ② 设置value值，v-model获取的是Array类型

   <!-- hobby属性存储的是所有被选中复选框value的集合，比如：['study', 'game'] -->
   <!-- 如果hobby初始值是字符串，则hobby收集到的是boolean类型的值 -->
   <input type="checkbox" value="study" v-model="hobby">学习
   <input type="checkbox" value="eat" v-model="hobby">吃饭
   <input type="checkbox" value="game" v-model="hobby">打游戏
   

4. 下拉选择框
   【给每个option标签添加value属性，将v-model写在父级<select>标签上，最终v-model获取的是被选中那一项的value值】

   <!-- city属性存储的是被选中项的value -->
   <select v-model="city">
   	<option value="tianjin">天津</option>
   	<option value="beijing">北京</option>
   	<option value="shanghai">上海</option>
   </select>
   

5. 多行文本框
   【与普通文本框一样，v-model获取的是所有输入的内容】

   <textarea v-model="comment"></textarea>