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

vue v model input

Question

Estoy aprendiendo 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?

Answer 1

Desde here - 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 . Combina v-bind , que trae un valor js al marcado, y v-on:input para actualizar el valor js .

Use v-model cuando pueda. Use v-bind / v-on cuando deba :-) 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, selección). 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 se disparará con mucha más frecuencia.

v-model también tiene modificadores .lazy , .trim , .number , cubiertos en el documento .

Answer 2

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

pero v-bind:value se denomina enlace unidireccional, lo que significa que 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/

Answer 3

Hay casos en los que no desea 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 cambio, tome su v-model y divídalo como la respuesta anterior indica

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

En la práctica, si desacopla 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>

Answer 4

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

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 vincular 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
ex:
<input type="text" v-bind:class="abc" v-bind:value="">

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