v-model 修饰符： .number .trim .lazy

Posted 2023-03-24

参考技术A 最近在开发中遇到了一点在v-model修饰符上的问题,经过后面的仔细研究,发现.number .trim .lazy的几个容易踩坑的地方,话不多说,直接上干货.

打印绑定的值,你会发现,typeOf(form.customs.packingQuantity)====>string

当输到第17位的时候:输入1显示的是0;输入2-6显示的是4;输入7-9显示的是8,bug出的我很懵逼;比如输入11111111111111111页面显示11111111111111110

产生原因:.number修饰符会将input里的值用parseFloat()转化,对位数超长的进行转换处理

注意:v-model加上.trim修饰符之后,输入框首尾将不能输入空格,并不是去空格,但是这样输入框中间必须有空格就只能在鼠标选择后加,用户体验不好

当v-model使用.lazy修饰符之后，改变input框中的内容并不会使得数据马上发生变化，此时当输入框失去焦点后触发change事件.控制台中输出相应内容。

注意：v-model使用.lazy修饰符后相当于     双向数据绑定不起作用了,谨慎使用