v-model.number和v-model的修饰符

在 Vue.js 中，v-model 是用于创建双向数据绑定的指令，这意味着你可以将数据绑定到输入元素上，并且当输入元素的值改变时，绑定的数据也会自动更新。
然而，有时候我们可能希望将输入的值强制转换为某种类型，比如数字。为此，Vue 提供了 v-model 的修饰符。在这种情况下，.number 是一个修饰符，它尝试将用户的输入转换为 Number 类型。
例如：

<template>  
  <div>  
    <input v-model.number="myNumber" type="text">  
    <p>输入的数字是: {{ myNumber }}</p>  
  </div>  
</template>  
  
<script>  
export default {  
  data() {  
    return {  
      myNumber: 0  
    };  
  }  
}  
</script>

假如你在输入框中输入 “123”，myNumber 的值将会是 123（一个数字），而不是 “123”（一个字符串）。
PS: 如果输入的不是一个有效的数字字符串（例如 “abc”），.number 修饰符会将其转换为 NaN（不是一个数字）。对于空字符串或只包含空格的字符串，.number 修饰符会将其转换为 null（在 Vue 2.x 中）或 undefined（在 Vue 3.x 中）。

除了 v-model.number 之外，Vue.js 中的 v-model 指令还提供了其他修饰符，用于调整双向数据绑定的行为。

1. .lazy

• 作用：默认情况下，v-model 会在输入事件（如 input）中同步输入框的数据。但是，.lazy 修饰符会延迟数据更新，直到输入框失去焦点或按下回车键时才会更新数据。
• 例如：<input v-model.lazy="message">
• 适用场景：当需要减少数据更新频率，以避免频繁的计算和渲染时，可以使用 .lazy 修饰符。

2. .trim

• 作用：自动过滤掉输入框的首尾空格。
• 例如：<input v-model.trim="username">
• 适用场景：处理用户输入时，尤其是文本输入框，去除首尾空格以保持数据的清洁性。

PS：这些修饰符可以单独使用，也可以组合使用，以满足不同的需求。例如，可以同时使用 .lazy 和 .trim 修饰符来实现延迟同步并去除首尾空格：

<input v-model.lazy.trim="text">

使用 v-model 和修饰符可以更好地控制表单元素和组件的双向数据绑定行为，以满足不同的需求和约束。减少样板代码，提高开发效率。