v-model使用

vue版本:2.9.6
v-model用来在input,select,text,checkbox,radio等表单控件上创建双向数据绑定,指令后面可以跟多个参数(number,lazy,debounce)

  • number
    将输入自动转化为Number,原值转换结果为NaN则返回原值
    使用v-model.number无效,返回结果被处理为了字符串.
    解决:v-model.number="msg" type="number"使用html的type属性进行转化,输入框输入的时只允许输入数字
  • lazy
    <input v-model.lazy="msg">输入框变化,v-model不变
  • debounce
    vue的返回延时同步,避免高耗操作(比如,input输入内容时随时发送ajax请求)
    尝试失败–》度娘
    发现:vue2.0 版本带有debounce 的 v-model 移除了,移除的原因:Debouncing 曾经被用来控制 Ajax 请求及其它高耗任务的频率。Vue 中v-model的 debounce 属性参数使得在一些简单情况下非常容易实现这种控制。但实际上,这是控制了状态更新的频率,而不是控制高耗时任务本身。这是个微小的差别,但是会随着应用增长而显现出局限性。 ```html
    <!–
    通过使用 lodash 或者其它库的 debounce 函数,
    我们相信 debounce 实现是一流的,
    并且可以随处使用它,不仅仅是在模板中。
  • ->
    ``` 这种方式的另外一个优点是:当包裹函数执行时间与延时时间相当时,将会等待较长时间。比如,当给出搜索建议时,要等待用户输入停止一段时间后才给出建议,这个体验非常差。其实,这时候更适合用 throttling 函数。因为现在你可以自由的使用类似 lodash 之类的库,所以很快就可以用 throttling 重构项目。 [参考连接](https://blog.csdn.net/weixin_38199437/article/details/83018953)