The three modifiers supported for the v-model directive in Vue.js
:
lazy : By default, the v-model directive syncs the input with the data after each input event. We can add the lazy modifier to instead sync after change events.
<!-- synced after "change" instead of "input" -->
<input v-model.lazy="msg" >
number : The number modifier is used to our v-model when we want user input to be automatically typecast as a number. With the type="number"
, the value of HTML input elements always returns a string. That's why this typecast modifier is required.
<input v-model.number="age" type="number">
trim : We should add the trim modifier to our v-model when we want whitespace from user input to be trimmed automatically.
<input v-model.trim="msg">