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

大多数对于v-model修饰符的"不准确"解释

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

v-model.number 限制用户输入的只能是数字 != 将用户输入的字符串转换成number

注意点1

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

注意点2

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

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

v-model.trim 限制用户不能输入空格 != 将用户输入的前后的空格去掉

使用正常

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

v-model.lazy 输入框发生改变后触发视图刷新!= 只有在input输入框发生一个blur时才触发

注意点

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

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