web-dev-qa-db-fra.com

Vue.js - Différence entre v-model et v-bind

J'apprends avec un cours en ligne et l'instructeur m'a donné un exercice pour créer un texte d'entrée avec une valeur par défaut. Je l'ai complété avec v-model mais l'instructeur a choisi v-bind: value et je ne comprends pas pourquoi.

Quelqu'un peut-il me donner une explication simple sur la différence entre ces deux et quand il vaut mieux utiliser chacun?

javascriptmvvmframeworksvue.jsfrontend
141
Gustavo Dias

De ici - N'oubliez pas:

<input v-model="something">

est essentiellement le même que:

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

ou (syntaxe abrégée):

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

Donc, v-model est une liaison bidirectionnelle pour les entrées de formulaire . Il combine v-bind, qui apporte une valeur js dans le balisage, et v-on:input to met à jour la valeur js .

Utilisez v-model lorsque vous le pouvez. Utilisez v-bind/v-on lorsque vous devez :-) J'espère que votre réponse a été acceptée.

v-modelfonctionne avec tous les types d'entrées HTML de base (texte, zone de texte, numéro, radio, case à cocher, sélection). Vous pouvez utiliser v-model avec input type=date si votre modèle stocke les dates sous forme de chaînes ISO (aaaa-mm-jj). Si vous souhaitez utiliser des objets de date dans votre modèle (une bonne idée dès que vous allez les manipuler ou les formater), faites ceci .

v-model a quelques capacités supplémentaires qu'il est bon de connaître. Si vous utilisez un IME (beaucoup de claviers mobiles, ou chinois/japonais/coréen), v-model ne sera pas mis à jour tant qu'un mot n'est pas complet (un espace est entré ou l'utilisateur quitte le champ). v-input se déclenchera beaucoup plus souvent.

v-model a également des modificateurs .lazy, .trim, .number, couvert dans la doc .

309
bbsimonbb

En termes simples, v-model est pour une liaison bidirectionnelle signifie: si vous modifiez la valeur d'entrée, les données liées seront être changé et vice versa .

mais v-bind:value est appelé une liaison à sens unique qui signifie: vous pouvez modifier la valeur d'entrée en modifiant les données liées, mais vous ne peut pas modifier les données liées en modifiant la valeur d'entrée via l'élément .

découvrez cet exemple simple: https://jsfiddle.net/gs0kphvc/

23
Madmadi

v-model
il s'agit d'une liaison de données bidirectionnelle, elle est utilisée pour lier un élément d'entrée HTML lorsque vous modifiez la valeur d'entrée, puis les données liées sont modifiées.

v-model est utilisé uniquement pour les éléments d'entrée HTML 

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

v-bind
C’est une liaison de données à sens unique, ce qui signifie que vous ne pouvez lier des données qu’à un élément d’entrée, mais que vous ne pouvez pas modifier l’élément d’entrée en cours de modification des données liées. v-bind est utilisé pour lier l'attribut HTML
ex:
<input type="text" v-bind:class="abc" v-bind:value="">

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

Dans certains cas, vous ne souhaitez pas utiliser v-model. Si vous avez deux entrées et que chacune dépend l'une de l'autre, vous pouvez avoir des problèmes de référentiel circulaire. Les cas d'utilisation courants sont si vous construisez une calculatrice comptable.

Dans ces cas, ce n'est pas une bonne idée d'utiliser des observateurs ou des propriétés calculées.

Au lieu de cela, prenez votre v-model et divisez-le comme ci-dessus. La réponse indique

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

En pratique, si vous découplez votre logique de cette façon, vous appellerez probablement une méthode.

Voici à quoi cela ressemblerait dans un scénario réel:

<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>
0
Vincent Tang