Vue.js doit apprendre la liaison de contrôle de formulaire chaque jour

Utilisation de base

Vous pouvez utiliser la directive v-model pour créer une liaison de données bidirectionnelle sur les éléments de contrôle de formulaire. En fonction du type de contrôle, il choisit automatiquement la bonne méthode pour mettre à jour l'élément. Bien qu'un peu magique, le modèle v n'est qu'un sucre syntaxique pour mettre à jour les données sur les événements d'entrée utilisateur et gérer spécifiquement certains cas extrêmes.

Texte

<span>Message is: {{ message }}</span>
<br>
<input type="text" v-model="message" placeholder="edit me">

case à cocher

case à cocher unique, valeur logique :

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

Plusieurs cases à cocher, liées au même tableau :

<input type="checkbox" id="jack" value="Jack" v-model="checkedNames">
<label for="jack">Jack</label>
<input type="checkbox" id="john" value="John" v-model="checkedNames">
<label for="john">John</label>
<input type="checkbox" id="mike" value="Mike" v-model="checkedNames">
<label for="mike">Mike</label>
<br>
<span>Checked names: {{ checkedNames | json }}</span>

new Vue({
 el: '...',
 data: {
 checkedNames: []
 }
})

Radio

<input type="radio" id="one" value="One" v-model="picked">
<label for="one">One</label>
<br>
<input type="radio" id="two" value="Two" v-model="picked">
<label for="two">Two</label>
<br>
<span>Picked: {{ picked }}</span>

Sélectionner

Sélection unique :

<select v-model="selected">
 <option selected>A</option>
 <option>B</option>
 <option>C</option>
</select>
<span>Selected: {{ selected }}</span>

Sélection multiple (liée à un tableau) :

<select v-model="selected" multiple>
 <option selected>A</option>
 <option>B</option>
 <option>C</option>
</select>
<br>
<span>Selected: {{ selected | json }}</span>

Options dynamiques, rendues avec v-for :

<select v-model="selected">
 <option v-for="option in options" v-bind:value="option.value">
 {{ option.text }}
 </option>
</select>
<span>Selected: {{ selected }}</span>

new Vue({
 el: '...',
 data: {
 selected: 'A',
 options: [
  { text: 'One', value: 'A' },
  { text: 'Two', value: 'B' },
  { text: 'Three', value: 'C' }
 ]
 }
})

Valeur de liaison

Pour les boutons radio, les cases à cocher et les options des cases de sélection, la valeur liée au v-model est généralement une chaîne statique (pour les cases à cocher, c'est une valeur logique) :

<!-- 当选中时，`picked` 为字符串 "a" -->
<input type="radio" v-model="picked" value="a">
 
<!-- `toggle` 为 true 或 false -->
<input type="checkbox" v-model="toggle">
 
<!-- 当选中时，`selected` 为字符串 "abc" -->
<select v-model="selected">
 <option value="abc">ABC</option>
</select>

Mais parfois, nous voulons lier une valeur à une propriété dynamique de l'instance Vue. Dans ce cas, nous pouvons utiliser v-bind pour l'implémenter, et la valeur de cette propriété n'a pas besoin d'être une. chaîne.

case à cocher

<input
 type="checkbox"
 v-model="toggle"
 v-bind:true-value="a"
 v-bind:false-value="b">
 
// 当选中时
vm.toggle === vm.a
// 当没有选中时
vm.toggle === vm.b

Radio

<input type="radio" v-model="pick" v-bind:value="a">
 
// 当选中时
vm.pick === vm.a

Sélectionnez Options

<select v-model="selected">
 <!-- 对象字面量 -->
 <option v-bind:value="{ number: 123 }">123</option>
</select>
 
// 当选中时
typeof vm.selected // -> &#39;object&#39;
vm.selected.number // -> 123

Propriétés des paramètres

paresseux

Par défaut, v-model est dans l'événement d'entrée À synchronisez la valeur et les données de la zone de saisie, vous pouvez ajouter un attribut paresseux pour le synchroniser dans l'événement de changement :

number

Si vous souhaitez convertir automatiquement l'entrée de l'utilisateur en type Number (si le résultat de la conversion de la valeur d'origine est NaN, renvoie la valeur d'origine), vous pouvez ajouter un numéro de fonctionnalité :

debounce

debounce Définir un minimum delay, chaque Retard de synchronisation de la valeur et des données de la zone de saisie après le premier tapotement. Ceci est utile si chaque mise à jour nécessite une opération coûteuse (telle qu'une requête Ajax dans une invite de saisie).

Notez que le paramètre anti-rebond ne retarde pas l'événement d'entrée : il retarde "l'écriture" des données sous-jacentes. Par conséquent, vm.$watch() doit être utilisé pour répondre aux modifications de données lors de l'utilisation de l'anti-rebond. Si vous souhaitez retarder les événements DOM, vous devez utiliser le filtre anti-rebond.

Ce qui précède représente l'intégralité du contenu de cet article. J'espère qu'il sera utile à l'apprentissage de chacun. J'espère également que tout le monde visitera le site Web PHP chinois.

Pour plus d'articles liés à la liaison de contrôle de formulaire que vous devez apprendre chaque jour dans Vue.js, veuillez faire attention au site Web PHP chinois !