Exemple de partage de la façon dont vue.js implémente les boutons radio, les cases à cocher et les listes déroulantes

Cet article présente principalement des exemples d'implémentation de boutons radio, de cases à cocher et de listes déroulantes dans vue.js. Il a une certaine valeur de référence. Les amis intéressés peuvent s'y référer

Vue.js peut être très utile. pratique pour réaliser une liaison de données bidirectionnelle, il présente donc de grands avantages en termes de traitement de formulaire et d'interaction homme-machine. Ce qui suit utilise des boutons radio, des cases à cocher et des listes déroulantes comme exemples pour présenter leur implémentation spécifique dans HTML et Vue.js.

1. Bouton radio

La méthode pour implémenter le bouton radio en HTML traditionnel est la suivante :

<p id="app"> 
 <input type="radio" name="gender" value="man" id="man"/><label for="man">男</label> 
 <input type="radio" name="gender" value="woman" id="women"/><label for="women">女</label> 
</p>

Remarque : les valeurs de l'attribut de nom doivent ici être les mêmes pour garantir qu'un seul peut être sélectionné en même temps. Il sert également à identifier les données envoyées au serveur ; la valeur value est également très importante Lorsque le bouton est sélectionné, la valeur sera envoyée au serveur

Il est plus pratique d'utiliser vue. js pour implémenter la boîte de boutons radio, par exemple, comme suit. Nous n'avons plus besoin de l'attribut name. Il nous suffit d'utiliser la directive v-model pour lier la même variable à chaque option afin de garantir qu'une seule est sélectionnée en même temps, l'attribut value est toujours nécessaire. indiquer la valeur une fois sélectionné.

<p id="app"> 
 <label>男<input type="radio" v-model="gender" value="man"/></label> 
 <label>女<input type="radio" v-model="gender" value="woman"/></label> 
 <p>已选：{{gender}}</p><!--如果用原生js实现此功能比较麻烦--> 
</p> 
<script> 
 var app=new Vue({ 
  el:&#39;#app&#39;, 
  data:{ 
   gender:&#39;&#39; 
  } 
 }); 
</script>

2. Case à cocher

Implémenter la case à cocher en HTML traditionnel Le code est le suivant :

<p id="app"> 
 <input type="checkbox" name="whom" value="jack" id="Jack"/><label for="Jack">jack</label> 
 <input type="checkbox" name="whom" value="bob" id="Bob"/><label for="Bob">bob</label> 
 <input type="checkbox" name="whom" value="alice" id="Alice"/><label for="Alice">alice</label> 
</p>

Comme vous pouvez le voir dans le code ci-dessus : la méthode de construction du bouton radio et de la case à cocher en HTML est similaire, sauf que la valeur de type devient une case à cocher, et en même temps, le nom et la valeur sont également utilisés pour représenter une case à cocher et son état de sélection.

La construction de cases à cocher dans vue.js est similaire aux boutons radio, sauf que chaque case d'option est liée à une variable à l'aide du v-model. Ces variables sont généralement placées dans un objet, ou le v-model lie un objet identique. nom de l'attribut, et l'attribut est un tableau ; des exemples pour ces deux situations sont les suivants :

Utilisez v-model pour lier une variable à chaque boîte d'option :

<p id="app"> 
 <label>jack<input type="checkbox" v-model="person.jack"/></label> 
 <label>bob<input type="checkbox" v-model="person.bob"/></label> 
 <label>alice <input type="checkbox" v-model="person.alice"/></label> 
 <p>已选：{{person}}</p> 
</p> 
<script> 
 var app = new Vue({ 
  el: &#39;#app&#39;, 
  data: { 
   person: {jack: false, bob: false, alice: false} 
  } 
 }) 
</script>

Comme vous pouvez le voir dans le code ci-dessus : l'attribut value n'est plus nécessaire ici. La valeur liée à chaque attribut est de type booléen lorsqu'elle est sélectionnée, la valeur devient vraie, et lorsqu'elle n'est pas sélectionnée, elle devient. true. false;

Lier un attribut du même type de tableau au v-model :

<p id="app"> 
 <label>jack<input type="checkbox" v-model="whom" value="jack"/></label> 
 <label>bob<input type="checkbox" v-model="whom" value="bob"/></label> 
 <label>alice <input type="checkbox" v-model="whom" value="alice"/></label> 
 <p>已选：{{whom.join(&#39;|&#39;)}}</p> 
</p> 
<script> 
 var app = new Vue({ 
  el: &#39;#app&#39;, 
  data: { 
   whom: [] 
 } 
 }) 
</script>

Comme vous pouvez le voir dans le code : for each Les options sont toutes liées au même nom de tableau. L'attribut value est requis ici. Lorsqu'il est sélectionné, la valeur correspondante sera ajoutée au tableau. Lorsqu'il est désélectionné, la valeur correspondante dans le tableau sera supprimée.

3. Boîte déroulante

Le code traditionnel pour construire une boîte déroulante en HTML est le suivant :

<select name="selected"> 
 <option value="a">A</option> 
 <option value="b">B</option> 
 <option value="c">C</option> 
</select>

Le nom est utilisé pour l'identification des données lorsqu'il est envoyé au serveur, et la valeur est la valeur envoyée au serveur lorsqu'elle est sélectionnée. Si la valeur est omise dans l'option, la valeur envoyée au serveur est la valeur entre les balises d'option.

La méthode pour implémenter la liste déroulante avec vue2.0 est la suivante :

<p id="app"> 
 <select v-model="selected"> 
  <option v-for="item in items" v-bind:value="item.value">{{item.text}}</option> 
 </select> 
 <span>已选:{{selected}}</span> 
</p> 
<script src="vue.js"></script> 
<script> 
 new Vue({ 
  el:&#39;#app&#39;, 
  data:{ 
   items:[{text:&#39;A&#39;,value:&#39;a&#39;},{text:&#39;B&#39;,value:&#39;b&#39;},{text:&#39;C&#39;,value:&#39;c&#39;}], 
   selected:&#39;&#39; 
  } 
 }); 
</script>

Comme vous pouvez le voir sur le code, utilisez l'instruction v-for, évitez d'écrire à plusieurs reprises des balises d'option et utilisez l'instruction v-bind pour lier l'attribut value. Lorsqu'un élément est sélectionné, la valeur de l'option est affectée à la variable sélectionnée.

Qu'il soit écrit en HTML ou implémenté dans Vue, si vous devez implémenter une liste déroulante à sélection multiple, il vous suffit d'écrire l'attribut multiple dans la balise select (en même temps, dans Vue, la variable sélectionnée est initialisée dans un tableau vide).

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!