百香果果ccc
百香果果ccc

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

  1. 文本框
    【直接利用v-model获取输入框的值】
    
<input type="text" v-model="username">
  2. 单选框
    【需要给每个单选框设置唯一的value值，之后通过v-model获取被选中的那个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类型
    
<input type="checkbox" v-model="isAgree">是否同意
    ② 设置value值，v-model获取的是Array类型
    

<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写在父级