您现在的位置是:首页 >学无止境 >vue监视数据的原理、收集表单数据网站首页学无止境
vue监视数据的原理、收集表单数据
简介vue监视数据的原理、收集表单数据
一、vue监视数据的原理
- vue会监视data中所有层次的数据
- 如何检测对象中的数据?通过setter实现监视,且要在new vue时就传入要检测的数据
- 对象中后追加的属性,vue默认不做响应式处理
- 如需给后添加的属性做响应式,请使用如下API:
- vue.set(target, propertyName/index ,value)
- vm.$set(target , propertyName/index ,value)
- 如何监测数组中的数据?通过包裹数组更新元素的方法实现
- 调用原生对应的方法对数组进行更新
- 重新解析模版,进而更新页面
- 在vue中修改数组中的某一个元素一定要用如下方法:
- 使用这些API:push(),shift(),unshift(),splice(),sort(),reverse()
- vue.set()或者vm.$set()
- 注意:vue.set和vm.$set()不能给vm或vm的根数据对象添加属性
二、收集表单数据
若<input type = "text" />,则v-model收集的是value值,用户输入的就是value值。
若<input type = "radio" />,则v-model收集的是value值,且要给标签配置value值。
若<input type = "checkbox" />
- 没有配置input的value属性,那么收集的就是checked(布尔值)
- 配置input的value属性:
- v-model的初始值是非数组,那么收集的就是checked(bool值)
- v-model的初始值是数组,那么收集的就是value组成的数组
备注:v-model的三个修饰符:
lazy:失去焦点再收集数据
number:输入字符串转为有效数字
trim:输入收尾空格过滤
风语者!平时喜欢研究各种技术,目前在从事后端开发工作,热爱生活、热爱工作。