Vuetify 2实现v-text-field仅在失焦时更新绑定模型

核心方案 #

Vuetify 2的v-text-field自带lazy属性，可直接实现失焦时才同步v-model的需求，再配合blur事件触发数字格式化，就能完美适配你的场景。

完整代码示例 #

模板部分

<v-text-field
  v-model="inputNumber"
  lazy
  type="number"
  @blur="formatToTwoDecimals"
  label="请输入数字"
></v-text-field>

脚本部分

export default {
  data() {
    return {
      inputNumber: ''
    }
  },
  methods: {
    formatToTwoDecimals() {
      // 解析输入为有效数字
      const num = Number(this.inputNumber)
      if (!isNaN(num)) {
        // 格式化为两位小数，自动补零
        this.inputNumber = num.toFixed(2)
      } else {
        // 无效输入的处理逻辑，可根据需求调整（比如清空/保留原输入）
        this.inputNumber = ''
      }
    }
  }
}

关键细节说明 #

• lazy属性：Vuetify内置的延迟更新属性，添加后v-model仅在组件失去焦点时同步数据，输入过程中不会触发模型更新，彻底避免格式化干扰用户输入。
• type="number"：限制输入框仅接受数字类字符（含小数点），减少无效输入场景，提升用户体验。若需支持特殊输入，可移除该属性，但要在格式化函数中追加更严格的校验逻辑。
• 数字格式化：toFixed(2)会将数字转换为保留两位小数的字符串，例如输入12转为"12.00"，输入12.5转为"12.50"，完全匹配你的需求。
• 无效输入处理：通过isNaN判断输入有效性，避免格式化时出现错误，这里设置为空，你也可改为保留原输入或给出提示。

内容的提问来源于stack exchange，提问作者jason44107