Vue.js Input Modifiers


  • .trim

If you want user input to be trimmed automatically, you can add the trim modifier to your v-model managed inputs:

<input v-model.trim="msg">
  • .number

If you want user input to be automatically typecast as a number, you can do as follow:

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

Generally, v-model syncs the input with the data after each input event, but you can add the lazy modifier to instead sync after change events:

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