Vue.js: diferencia entre v-model y v-bind


209

Estoy aprendiendo Vue con un curso en línea y el instructor me dio un ejercicio para hacer un texto de entrada con un valor predeterminado. Lo completé usando v-model pero, el instructor eligió v-bind: value y no entiendo por qué.

¿Alguien puede darme una explicación simple sobre la diferencia entre estos dos y cuándo es mejor usar cada uno?


8
v-modelse usa principalmente para la entrada y la oferta de formularios, así que úselo cuando trabaje con varios tipos de entrada. v-bindLa 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.
Belmin Bedak

55
En algunos casos puedes usar cada uno de ellos. A veces no, por ejemplo: <div v-bind:class="{ active: isActive }"></div>- no puede enlazar el atributo html usando el modelo, debe usar la v-binddirectiva. Para los elementos del formulario, querrá usar la v-modeldirectiva: "selecciona automáticamente la forma correcta de actualizar el elemento según el tipo de entrada".
Alexander

1
@Alexander La frase "enlazar atributo HTML" me ayudó a pensar mejor en esto. Sería bueno verte influir en esto con una respuesta más completa sobre lo que realmente está sucediendo con estas dos construcciones.
Tom Russell

@Alexander Esp en el contexto del componente datay props...
Tom Russell

Respuestas:


430

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-modeles un enlace bidireccional para entradas de formulario . Se combina v-bind, lo que aporta un valor js al marcado, y v-on:inputpara actualizar el valor js .

Úselo v-modelcuando pueda. Use v-bind/ v-oncuando 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-modelcon input type=datesi 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-modeltiene 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-inputdisparará con mucha más frecuencia.

v-modeltambién tiene modificadores .lazy, .trim, .number, cubierto en el doc .


33
'Usa v-model cuando puedas. Use v-bind / v-on cuando deba '. Gran resumen! ¡Muchas gracias!
尤川豪

¿Cuál es la diferencia entre v-modely v-bind:xxx.sync?
El Mac

2
@ElMac v-model es un enlace bidireccional entre un componente Vue y un modelo javascript. La fuente (el lado del modelo del enlace) se declara en los datos del componente Vue. De esta manera, Vue le permite extraer el estado de sus componentes, luego modificar este estado directamente desde el componente. Es un patrón simple para la gestión del estado que es un sello distintivo de Vue (difícil / oculto / imposible / desalentado en Angular y React). v-bind: xxx.sync es un enlace bidireccional entre un componente Vue y su padre]. El estado permanece encapsulado. 'Pertenece' al padre. ¡Esto no es necesariamente mejor!
bbsimonbb

45

En palabras simples v-modeles para enlaces bidireccionales : si cambia el valor de entrada, los datos enlazados se cambiarán y viceversa .

pero v-bind:valuese llama enlace unidireccional que significa: puede cambiar el valor de entrada cambiando los datos enlazados, pero no puede cambiar los datos enlazados cambiando el valor de entrada a través del elemento .

mira este sencillo ejemplo: https://jsfiddle.net/gs0kphvc/


'si cambia el valor de entrada, los datos enlazados se cambiarán y viceversa. '- no puedo entender la parte' viceversa 'incluso del ejemplo de violín. Puedes explicarlo ?
Istiaque Ahmed

si cambia el valor de entrada a través del elemento, los datos enlazados se cambiarán y también si cambia los datos enlazados a través de, por ejemplo, las API de Vue, el valor del elemento de entrada cambiaría.
Madmadi

¿Cómo cambiar los datos vinculados a través de Vue API?
Istiaque Ahmed

En el ejemplo de violín, digamos que tenemos un método que cambia data_source como estethis.data_source = 'Some new value'
Madmadi

por data_source, te refieres al HTML inyectado en DOM desde input, ¿verdad?
Istiaque Ahmed

3

v-model
es un enlace de datos bidireccional, se usa para vincular el elemento de entrada html cuando cambia el valor de entrada, luego los datos delimitados serán cambiados.

v-model se usa solo para elementos de entrada HTML

ex: <input type="text" v-model="name" > 

v-bind
es un enlace de datos unidireccional, significa que solo puede enlazar datos al elemento de entrada pero no puede cambiar el elemento de entrada que cambia los datos delimitados. v-bind se usa para enlazar el atributo html, por
ejemplo:
<input type="text" v-bind:class="abc" v-bind:value="">

<a v-bind:href="home/abc" > click me </a>

'v-model es enlace de datos bidireccional': ¿cuáles son esas 2 formas específicamente?
Istiaque Ahmed

2
v-model is for two way bindings means: if you change input value, the bound data will be changed and vice versa. but v-bind:value is called one way binding that means: you can change input value by changing bound data but you can't change bound data by changing input value through the element.

v-model is intended to be used with form elements. It allows you to tie the form 
 element (e.g. a text input) with the data object in your Vue instance.

Example: https://jsfiddle.net/jamesbrndwgn/j2yb9zt1/1/ 

v-bind is intended to be used with components to create custom props. This allows you to pass data to a component. As the prop is reactive, if the data that’s passed to the component changes then the component will reflect this change

 Example: https://jsfiddle.net/jamesbrndwgn/ws5kad1c/3/

Espero que esto te ayude con la comprensión básica


1

Hay casos en los que no quieres usar v-model. Si tiene dos entradas y cada una depende de la otra, es posible que tenga problemas de referencia circulares. Los casos de uso comunes son si está construyendo una calculadora contable.

En estos casos, no es una buena idea usar observadores ni propiedades calculadas.

En su lugar, tome su v-modely divídalo como la respuesta anterior indica

<input
   :value="something"
   @input="something = $event.target.value"
>

En la práctica, si está desacoplando su lógica de esta manera, probablemente llamará a un método.

Así es como se vería en un escenario del mundo real:

<script src="https://cdnjs.cloudflare.com/ajax/libs/vue/2.5.17/vue.js"></script>

<div id="app">
  <input :value="extendedCost" @input="_onInputExtendedCost" />
  <p> {{ extendedCost }}
</div>

<script>
  var app = new Vue({
    el: "#app",
    data: function(){
      return {
        extendedCost: 0,
      }
    },
    methods: {
      _onInputExtendedCost: function($event) {
        this.extendedCost = parseInt($event.target.value);
        // Go update other inputs here
    }
  }
  });
</script>

Al usar nuestro sitio, usted reconoce que ha leído y comprende nuestra Política de Cookies y Política de Privacidad.
Licensed under cc by-sa 3.0 with attribution required.