- 文本框
【直接利用v-model获取输入框的值】<!-- username存储的是输入框中的字符串 --> <input type="text" v-model="username">
- 单选框
【需要给每个单选框设置唯一的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">女
- 复选框
① 不设置value值,v-model获取的是boolean类型
② 设置value值,v-model获取的是Array类型<!-- isAgree属性存储的是该复选框的选中情况 --> <input type="checkbox" v-model="isAgree">是否同意
<!-- 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">打游戏
- 下拉选择框
【给每个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>
- 多行文本框
【与普通文本框一样,v-model获取的是所有输入的内容】<textarea v-model="comment"></textarea>
Vue利用v-model获取不同类型表单数据的方式
于 2022-12-06 10:12:24 首次发布