v-model中.lazy、.number、.trim

在Vue.js中，v-model 是一个非常核心的指令，它主要用于在表单输入和应用状态之间建立双向绑定。

Vue.js 提供了一些修饰符（modifiers），这些修饰符可以用来指定不同的行为。.lazy、.number 和 .trim 就是这样的修饰符。

1. .lazy：
   默认情况下，v-model 在每次 input 事件触发时都会更新数据。当你加上 .lazy 修饰符时，v-model 会转变为在 change 事件触发时更新数据。这意味着数据更新会在输入框失去焦点时发生，而不是在输入过程中立即发生。

   示例：

   <input  v-model.lazy="msg"  type="text">
   

2. .number：
   当你使用 .number 修饰符时，v-model 会尝试将用户的输入转换成一个数值类型（浮点数或整数）。如果转换失败（比如用户输入了非数字的字符），它会返回原始的字符串。在 2.0 版本中，如果输入的值无法被转换成数字，.number 修饰符会抑制警告。

   示例：

   <input  v-model.number="age"  type="number">
   

3. .trim：
   .trim 修饰符会去除输入字符串的首尾空白字符。这在处理用户输入时非常有用，因为用户经常会在输入时不小心添加空格。

   示例：

   <input  v-model.trim="username"  type="text">
   

这些修饰符可以单独使用，也可以组合使用，以实现更精细的数据处理和控制。使用这些修饰符可以帮助开发者减少对输入数据的额外处理，并提高应用的用户体验。