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

Alguien puede darme una explicación sencilla acerca de la diferencia entre estos dos y cuando es mejor usar cada uno de ellos?

  • v-model se utiliza principalmente para la entrada y la forma bidning, por lo que se usa cuando se ocupan de los distintos tipos de entrada.v-bind la directiva permite a producir algo de valor dinámico escribiendo algunos JS expresión que en la mayoría de los casos depende de los datos del modelo de datos – así que piensa acerca de v-bind como la directiva que debe utilizar cuando desea lidiar con algunas cosas dinámicas.
  • En algunos casos se puede utilizar cada uno de ellos. A veces no, por ejemplo: <div v-bind:class="{ active: isActive }"></div> – usted no se puede enlazar el atributo html, utilizando el modelo, debe utilizar v-bind directiva. Para formar los elementos que se desee utilizar v-model directiva – «se selecciona automáticamente el modo correcto para actualizar el elemento basado en el tipo de entrada.»
  • La frase «se unen atributo HTML» me ayudó a pensar acerca de esto mejor. Sería bueno ver que pesan sobre esto con una respuesta más completa acerca de lo que está sucediendo con estas dos construcciones.
  • Esp en el contexto de la componente data y props
InformationsquelleAutor Gustavo Dias | 2017-02-15

4 Comentarios

  1. 312

    De aquí
    Recuerde:

    <input v-model="something">

    es esencialmente el mismo:

    <input
       v-bind:value="something"
       v-on:input="something = $event.target.value"
    >

    o (sintaxis abreviada):

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

    Así v-model es un de dos vías de enlace para el formulario de entradas. Combina v-bind, que trae un js valor en el marcado, y v-on:input a actualización de la js valor.

    Uso v-model cuando se puede. Uso v-bind/v-on cuando usted debe 🙂 espero su respuesta fue aceptada.

    v-model funciona con todos los tipos de entrada HTML (texto, área de texto, número, radio, checkbox, seleccionar). Usted puede utilizar v-model con input type=date si su modelo almacena las fechas como ISO cadenas (aaaa-mm-dd). Si desea utilizar la fecha de los objetos en el modelo (una buena idea tan pronto como usted va a manipular o formato), hacer esto.

    v-model tiene algo más de inteligencia que es bueno ser consciente de. Si estás utilizando un IME ( muchos de los móviles de los teclados, o Chino/Japonés/coreano ), v-modelo no se actualizará hasta que una palabra es completa (un espacio que se introduce o el usuario sale del campo). v-input se dispara mucho más a menudo.

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

    • ‘V-modelo cuando se puede. Uso de la v-bind/v-cuando el que debe». Gran resumen! Muchas gracias!
    • ¿Cuál es la diferencia entre v-model y v-bind:xxx.sync?
    • v-modelo es un enlace bidireccional entre un Vue componente y un modelo de javascript. El origen (el modelo del lado de la unión) es declarada en los datos de la Vue componente. Como este, Vue le permite extraer estado de sus componentes, a continuación, modificar este estado directamente desde el componente. Es un modelo simple para la administración del estado, que es una característica de la Vue (difícil/oculto/imposible/desalentados en Angular y Reaccionar). v-bind:xxx.sync es un enlace bidireccional entre un Vue componente y su padre]. El estado permanece encapsulado. Que «pertenece» a los padres. Esto no es necesariamente mejor!
  2. 25

    En simples palabras
    v-model es para forma dos enlaces significa: si el cambio de valor de entrada, el enlazado de datos se puede cambiar y viceversa.

    pero v-bind:value se llama una forma de unión que significa: puede cambiar el valor de entrada cambiando de datos enlazados, pero usted no puede cambiar los datos enlazados por el cambio de valor de entrada a través del elemento.

    echa un vistazo a este ejemplo sencillo: https://jsfiddle.net/gs0kphvc/

  3. 3

    v-modelo de

    es de dos sentidos de enlace de datos, se utiliza para enlazar elemento html input cuando se cambia un valor de entrada, a continuación, delimitada de datos va a ser el cambio.

    v-modelo sólo se utiliza para HTML los elementos de entrada

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

    v-bind

    es una forma de enlace de datos,significa que sólo se puede enlazar datos a elemento de entrada, pero no puede cambiar limitada de datos de cambio de elemento de entrada.
    v-unen se utiliza para enlazar atributo html

    ex:

    <input type="text" v-bind:class="abc" v-bind:value="">

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

    Hay casos en los que usted no desea utilizar v-model. Si usted tiene dos entradas, y cada dependen unos de otros, usted podría tener circular referencial problemas. Casos de uso más comunes es si usted está construyendo una contabilidad de la calculadora.

    En estos casos, no es una buena idea utilizar cualquiera de los observadores calculada o propiedades.

    Lugar, tome su v-model y de dividir la respuesta anterior indica

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

    En la práctica, si la disociación de la lógica de esta manera, usted probablemente va a ser una llamada a un método.

    Esto es lo que se vería en un escenario real:

    HTML:

    <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>

Dejar respuesta

Please enter your comment!
Please enter your name here