您现在的位置是:首页 >学无止境 >vue监视数据的原理、收集表单数据网站首页学无止境

vue监视数据的原理、收集表单数据

diao____si 2023-05-15 12:00:03
简介vue监视数据的原理、收集表单数据

一、vue监视数据的原理

  1. vue会监视data中所有层次的数据
  2. 如何检测对象中的数据?通过setter实现监视,且要在new vue时就传入要检测的数据
    1. 对象中后追加的属性,vue默认不做响应式处理
    2. 如需给后添加的属性做响应式,请使用如下API:
      1.  vue.set(target, propertyName/index ,value)
      2. vm.$set(target , propertyName/index ,value)
  3. 如何监测数组中的数据?通过包裹数组更新元素的方法实现
    1. 调用原生对应的方法对数组进行更新
    2. 重新解析模版,进而更新页面
  4. 在vue中修改数组中的某一个元素一定要用如下方法
    1. 使用这些API:push(),shift(),unshift(),splice(),sort(),reverse()
    2. vue.set()或者vm.$set()
  5. 注意:vue.set和vm.$set()不能给vm或vm的根数据对象添加属性

二、收集表单数据

若<input type = "text" />,则v-model收集的是value值,用户输入的就是value值。

若<input type = "radio" />,则v-model收集的是value值,且要给标签配置value值。

若<input type = "checkbox" />

  1. 没有配置input的value属性,那么收集的就是checked(布尔值)
  2. 配置input的value属性
    1. v-model的初始值是非数组,那么收集的就是checked(bool值)
    2. v-model的初始值是数组,那么收集的就是value组成的数组

备注:v-model的三个修饰符:

          lazy:失去焦点再收集数据

          number:输入字符串转为有效数字

          trim:输入收尾空格过滤

风语者!平时喜欢研究各种技术,目前在从事后端开发工作,热爱生活、热爱工作。