Desde aquí - Recuerda:
<input v-model="something">
es esencialmente lo mismo que:
<input
v-bind:value="something"
v-on:input="something = $event.target.value"
>
o (sintaxis abreviada):
<input
:value="something"
@input="something = $event.target.value"
>
Entonces, v-model
es un enlace bidireccional para entradas de formulario . Se combina v-bind
, lo que aporta un valor js al marcado, y v-on:input
para actualizar el valor js .
Úselo v-model
cuando pueda. Use v-bind
/ v-on
cuando debe :-) Espero que su respuesta haya sido aceptada.
v-model
funciona con todos los tipos básicos de entrada HTML (texto, área de texto, número, radio, casilla de verificación, seleccionar). Puede usar v-model
con input type=date
si su modelo almacena fechas como cadenas ISO (aaaa-mm-dd). Si desea usar objetos de fecha en su modelo (una buena idea tan pronto como los vaya a manipular o formatear), haga esto .
v-model
tiene algunos conocimientos adicionales que es bueno tener en cuenta. Si está utilizando un IME (muchos teclados móviles, o chino / japonés / coreano), v-model no se actualizará hasta que se complete una palabra (se ingrese un espacio o el usuario abandone el campo). v-input
disparará con mucha más frecuencia.
v-model
también tiene modificadores .lazy
, .trim
, .number
, cubierto en el doc .
v-model
se usa principalmente para la entrada y la oferta de formularios, así que úselo cuando trabaje con varios tipos de entrada.v-bind
La directiva le permite producir algún valor dinámico al escribir alguna expresión JS que en la mayoría de los casos depende de los datos del modelo de datos, así que piense en v-bind como directiva que debe usar cuando desee lidiar con algunas cosas dinámicas.<div v-bind:class="{ active: isActive }"></div>
- no puede enlazar el atributo html usando el modelo, debe usar lav-bind
directiva. Para los elementos del formulario, querrá usar lav-model
directiva: "selecciona automáticamente la forma correcta de actualizar el elemento según el tipo de entrada".data
yprops
...