Quelle est la différence entre v-bind et v-model dans vue

Différences : 1. "v-bind" est une liaison unidirectionnelle, tandis que "v-model" est une liaison bidirectionnelle ; 2. "v-bind" ne peut synchroniser les données qu'en vue sur la page, tandis que " v-model" peut non seulement synchroniser les données de Vue avec la page, mais également attribuer des données utilisateur aux attributs de Vue.

L'environnement d'exploitation de ce tutoriel : système Windows 7, vue version 2.9.6, ordinateur DELL G3.

La différence entre v-model et v-bind :

1 v-bind est une liaison unidirectionnelle, utilisée pour lier des données, des propriétés et des expressions, et ne peut synchroniser les données qu'en vue de la page. .

2. v-model est une liaison bidirectionnelle Il peut non seulement synchroniser les données en vue avec la page, mais également attribuer des données utilisateur aux attributs en vue.

3. v-bind peut attribuer une valeur à n'importe quel attribut, tandis que v-model ne peut effectuer une liaison de données bidirectionnelle que pour les éléments avec un attribut de valeur.

1. v-model

v-model est principalement utilisé dans les formulaires. Il crée une liaison bidirectionnelle sur les éléments du formulaire et choisit la bonne méthode pour mettre à jour les éléments en fonction du type de contrôle. et sélectionné

1. Lier le texte

<input type="text" v-model="val" />
<p> {{val}} </p>

2. Bind radio

<input type="radio" value="one" v-model="radioVal" />
<input type="radio" value="two" v-model="radioVal" />
<label for v-bind="radioval" />

la valeur radiovale deviendra un ou deux lorsque la valeur du bouton radio est sélectionnée

3. Bind checkBox

(1) unique. Case à cocher, la valeur finale est la valeur logique vraie et fausse

<input type="checkbox" v-model="checkVal"/>
<label for="checkbox">{{checkVal}}</label>

(2) Lorsqu'il y a plusieurs cases à cocher, liez la valeur à un tableau

<input type="checkbox" value="apple" v-model="checkArray"/>
<label for="checkbox">{{apple}}</label>

<input type="checkbox" value="banana" v-model="checkArray"/>
<label for="checkbox">{{banana}}</label>

<input type="checkbox" value="pear" v-model="checkArray"/>
<label for="checkbox">{{pear}}</label>

<span>{{checkArray | json}}</span>

La valeur dans checkArray changera en conséquence selon qu'elle est sélectionnée ou non

4. Lier la sélection

(1) Lier à une seule sélection
(2) Lors de la liaison de plusieurs sélections, la même chose s'applique aux tableaux

5 Ajouter des paramètres

(1) paresseux

Changer la zone de saisie. L'événement d'entrée est remplacé par un événement de changement, de sorte que la zone de saisie soit mise à jour dans l'événement de changement au lieu de input

Concernant la différence entre l'événement de changement et l'événement d'entrée, en termes simples :

L'événement de changement doit être déclenché après la zone de saisie perd le focus. Les événements de saisie peuvent être surveillés en temps réel.

(2)number

Changez les valeurs saisies dans la zone de texte en nombres S'il est remplacé par un nombre suivi de NAN, renvoyez la valeur d'origine

(3)trim

Supprimez les espaces de début et de fin. de la chaîne d'entrée

---

2. v-bind

1. Lier le texte

Utilisez directement v-bind ou {{}}

<p v-bind="message"></p>
<p>{{message}}</p>

2.

<p v-bind:src="http://...."></p>
<p v-bind:class="http://...."></p>
<p v-bind:style="http://...."></p>

4. Binding html

{{ number + 1 }}
{{ ok ? 'YES' : 'NO' }}
{{ message.split('').reverse().join('') }}

À ce stade, trois {} doivent être utilisésPour plus de connaissances liées à la programmation, veuillez visiter :

Vidéo de programmation

 ! !

Ce qui précède est le contenu détaillé de. pour plus d'informations, suivez d'autres articles connexes sur le site Web de PHP en chinois!