Vue.js: differenza tra v-model e v-bind


208

Sto imparando Vue con un corso online e l'istruttore mi ha dato un esercizio per creare un testo di input con un valore predefinito. L'ho completato usando v-model ma l'istruttore ha scelto v-bind: value e non capisco perché.

Qualcuno può darmi una semplice spiegazione sulla differenza tra questi due e quando è meglio usarli tutti?


8
v-modelviene utilizzato principalmente per le offerte di input e moduli, quindi usalo quando hai a che fare con vari tipi di input. v-binddirettiva ti consente di produrre un certo valore dinamico digitando un'espressione JS che nella maggior parte dei casi dipende dai dati del modello di dati, quindi pensa a v-bind come direttiva che dovresti usare quando vuoi affrontare alcune cose dinamiche.
Belmin Bedak,

5
In alcuni casi è possibile utilizzare ciascuno di essi. A volte no, ad esempio: <div v-bind:class="{ active: isActive }"></div>- non puoi associare l'attributo html usando il modello, dovresti usare la v-binddirettiva. Per gli elementi del modulo dovrai usare la v-modeldirettiva: "sceglie automaticamente il modo corretto di aggiornare l'elemento in base al tipo di input".
Alexander,

1
@Alexander La frase "attributo HTML bind" mi ha aiutato a pensarci meglio. Sarebbe bello vederti pesare su questo con una risposta più completa su ciò che sta realmente accadendo con questi due costrutti.
Tom Russell,

@Alexander Esp nel contesto di componente dataeprops ...
Tom Russell,

Risposte:


429

Da qui - Ricorda:

<input v-model="something">

è essenzialmente lo stesso di:

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

oppure (sintassi abbreviata):

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

Quindi v-modelè un'associazione a due vie per gli input di modulo . Esso combina v-bind, che porta un valore js nella marcatura, e v-on:inputper aggiornare il valore js .

Usa v-modelquando puoi. Usa v-bind/ v-onquando devi :-) Spero che la tua risposta sia stata accettata.

v-model funziona con tutti i tipi di input HTML di base (text, textarea, number, radio, checkbox, select). Puoi usare v-modelconinput type=date se il modello memorizza le date come stringhe ISO (aaaa-mm-gg). Se vuoi usare oggetti data nel tuo modello (una buona idea non appena li manipolerai o li formatterai), fallo .

v-modelha qualche intelligenza in più di cui è bene essere consapevoli. Se si utilizza un IME (molte tastiere mobili o cinese / giapponese / coreano), il modello v non si aggiornerà fino al completamento di una parola (viene inserito uno spazio o l'utente lascia il campo). v-inputsparerà molto più frequentemente.

v-modeldispone inoltre di modificatori .lazy, .trim, .number, coperto di doc .


33
'Usa v-model quando puoi. Usa v-bind / v-on quando devi '. Ottimo riassunto! Grazie mille!
尤川豪

Qual è la differenza tra v-modele v-bind:xxx.sync?
El Mac

2
@ElMac v-model è un'associazione bidirezionale tra un componente Vue e un modello javascript. La fonte (il lato del modello dell'associazione) è dichiarata nei dati del componente Vue. In questo modo, Vue ti consente di estrarre lo stato dai tuoi componenti, quindi modificare questo stato direttamente dal componente. È un modello semplice per la gestione dello stato che è un segno distintivo di Vue (difficile / nascosto / impossibile / scoraggiato in Angular and React). v-bind: xxx.sync è un'associazione a due vie tra un componente Vue e il suo genitore]. Lo stato rimane incapsulato. 'Appartiene' al genitore. Questo non è necessariamente migliore!
bbsimonbb,

45

In parole semplici significa che i bindingv-model a due vie significano: se si modifica il valore di input, i dati associati verranno modificati e viceversa .

ma v-bind:valuesi chiama associazione unidirezionale che significa: è possibile modificare il valore di input modificando i dati associati ma non è possibile modificare i dati associati modificando il valore di input tramite l'elemento .

Dai un'occhiata a questo semplice esempio: https://jsfiddle.net/gs0kphvc/


"se si modifica il valore di input, i dati associati verranno modificati e viceversa. '- non riesco a capire la parte' viceversa 'nemmeno dall'esempio del violino. Puoi spiegarlo ?
Istiaque Ahmed,

se si modifica il valore di input tramite l'elemento, i dati associati verranno modificati e anche se si modificano i dati associati, ad esempio le API Vue, il valore dell'elemento di input cambierebbe.
Madmadi

come modificare i dati associati tramite l'API Vue?
Istiaque Ahmed,

Nell'esempio di violino, supponiamo di avere un metodo che modifica data_source in questo modothis.data_source = 'Some new value'
Madmadi

per data_source, intendi l'HTML iniettato nel DOM da input, giusto?
Istiaque Ahmed,

3

v-model
è un'associazione di dati bidirezionale, viene utilizzata per associare l'elemento di input HTML quando si modifica il valore di input, quindi i dati limitati verranno modificati.

v-model viene utilizzato solo per gli elementi di input HTML

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

v-bind
è un'associazione di dati a senso unico, significa che puoi solo associare i dati all'elemento di input ma non puoi cambiare i dati limitati cambiando l'elemento di input. v-bind viene utilizzato per associare l'attributo html
ex:
<input type="text" v-bind:class="abc" v-bind:value="">

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

'modello v è un'associazione di dati bidirezionale': quali sono questi 2 modi specificamente?
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/

Spero che questo ti aiuti con la comprensione di base


1

Ci sono casi in cui non vuoi usare v-model. Se hai due input e ognuno dipende l'uno dall'altro, potresti avere problemi referenziali circolari. Casi d'uso comuni sono se stai costruendo un calcolatore di contabilità.

In questi casi, non è una buona idea utilizzare né watcher né proprietà calcolate.

Invece, prendi il tuo v-modele dividerlo come indicato nella risposta sopra

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

In pratica, se stai disaccoppiando la tua logica in questo modo, probabilmente chiamerai un metodo.

Ecco come sarebbe in uno scenario del mondo reale:

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

Utilizzando il nostro sito, riconosci di aver letto e compreso le nostre Informativa sui cookie e Informativa sulla privacy.
Licensed under cc by-sa 3.0 with attribution required.