文章目录

• v-model的三个修饰符
• 收集文本框
• 收集单选按钮
• 收集复选框
• 收集下拉列表
• 收集文本域
• 演示程序

Vue学习目录

上一篇：（十三）Vue之监测数据改变的原理

v-model的三个修饰符

v-model的三个修饰符：

• lazy：失去焦点再收集数据
• number：输入字符串转为有效的数字
• trim：输入首尾空格过滤

收集文本框

若收集的是文本框数据，则v-model收集的是value值，用户输入的就是value值，并且这个value是字符串形式的，如果想收集数字形式可以使用修饰符number。

收集单选按钮

若收集的是单选按钮，则v-model收集的是value值，且要给标签配置value值。

收集复选框

若收集的是复选框，有两种情况：

• 1.没有配置input的value属性，那么收集的就是checked（勾选 or 未勾选，是布尔值）
• 2.配置input的value属性:
  • (1)v-model的初始值是非数组，那么收集的就是checked（勾选 or 未勾选，是布尔值）
  • (2)v-model的初始值是数组，那么收集的就是value组成的数组

收集下拉列表

若收集的是下拉列表，那么v-model收集的是value值，用户选择哪个选项，就是哪个选项的value值。

收集文本域

若收集的是文本域，那么v-model收集的是value值，用户输入的就是value值。

演示程序

账号：

密码：

年龄： 

性别：男女

爱好：抽烟喝酒烫头

所属校区请选择校区北京广州深圳

其他信息：
阅读并接受《用户协议》

提交