vue使用v-model后number被转成了string

• 问题描述：使用v-model对输入框进行了值绑定，也指定了type="number"，但是在修改input内容后触发change事件时，获取输入框的值时，值从number类型变成了string

  <input v-model="userInfo.age" type="number" @change="handleChange">

• 解决方式：给v-model添加number修饰符

  <input v-model.number="userInfo.age" type="number" @change="handleChange">

• 补充：v-model其它修饰符

  • .lazy：v-model指令通常用于在表单元素和应用状态之间创建双向数据绑定，默认情况下，v-model会在 input 事件发生时同步输入框的值与数据，然而，通过添加 .lazy 修饰符，可以改变这一行为，使得数据同步延后在 change 事件中，也就是当输入框失去焦点时

    <input v-model.lazy="userInfo.username" type="text" @change="handleChange">

  • .trim：自动过滤用户输入的首尾空白字符

    <input v-model.trim="userInfo.username" type="text" @change="handleChange">