v-model修饰符trim, number, lazy作用

1. trim

<input v-model.trim="age" type="text">
<div> {{ age }}</div>

data() {
    return {
      age: 12
    }
 }

页面效果：

结论：可以去掉首位空格，但对于输入内部的空格不能处理
2. number

<input v-model.number="age" type="text">
<div> {{ typeof age }}</div>

data() {
    return {
      age: 12
    }
 }

页面效果：

如果不使用number修饰符

结论：number修饰符会将输入转化为number类型，且从第一个非number处后的内容就会全部被清除掉

但是当我输入11111111111111111的时候会发现

这是因为number修饰符会将input里的值用parseFloat()转化，因此使用的时候要注意精度问题

3. lazy

<input v-model.lazy="age" type="text">
<div> {{ age }}</div>

data() {
    return {
      age: 12
    }
 }

页面效果

当输入框失去焦点后

结论：在默认情况下，v-model 在 input 事件发生触发数据同步 ，添加 lazy 修饰符后，从而转为在 change 事件之后进行同步