Maison >interface Web >js tutoriel >Quelles sont les instructions de parcours de boucle dans vue ?

Quelles sont les instructions de parcours de boucle dans vue ?

php中世界最好的语言original: 2018-06-07 14:50:434528parcourir

Cette fois, je vais vous expliquer quelles sont les instructions de parcours de boucle dans vue et quelles sont les précautions à prendre pour les instructions de parcours de boucle vue. Ce qui suit est un cas pratique, jetons un coup d'œil.

L'instruction utilisée pour le parcours de boucle dans vue est v-for

1 v-for traverse le tableau

(1) valeur dans arr. parcourt les éléments du tableau dans

(2)(value,index) dans arr Parcourt les éléments et les indices du tableau dans le tableau

Exécutez le code :

<body>
  <p class="box">
    <ul>
      <li v-for="value in arr">{{value}}</li><br>　
      <li v-for="(value,index) in arr">{{value}}--{{index}}</li>
    </ul>
  </p>
<script src="js/vue.js"></script>
<script>
 new Vue({
   el:".box",
   data:{
     arr:["哈哈","嘻嘻","哼哼"]
   }
 });
</script>
</body>

Sortie résultat :

2.v-pour parcourir l'objet json

(1)valeur en json parcourir la valeur dans le json object

(2)(value,key) en json Parcourez les valeurs et les clés dans l'objet json

(3)(value,key,index) en json Parcourez les valeurs, clés et index dans l'objet json

Code d'exécution :

<body>
  <p class="box">
    <ul>
      <li v-for="value in json">{{value}}</li><br>
      <li v-for="(value,key) in json">{{value}}--{{key}}</li><br>
      <li v-for="(value,key,index) in json">{{value}}--{{key}}--{{index}}</li>
    </ul>
  </p>
<script src="js/vue.js"></script>
<script>
 new Vue({
   el:".box",
   data:{
     json:{
       baidu:"百度",
       souhu:"搜狐",
       sougou:"搜狗"
     }
   }
 });
</script>
</body>

Résultat de sortie :

3.v- pour les itérations sur des entiers

(1)n en entier traverse 1~entier, l'entier commence à partir de 1

(2)(n,index) en entier traverse 1~entier, entier commence à partir de 1, l'index commence à partir de 0

Exécutez le code :

<body>
  <p class="box">
    <ul>
      <li v-for="n in 3">{{n}}</li><br>
      <li v-for="(n,index) in 3">{{n}}--{{index}}</li>
    </ul>
  </p>
<script src="js/vue.js"></script>
<script>
 new Vue({
   el:".box",
   data:{
     
   }
 });
</script>
</body>

Résultat de sortie :

Bien sûr, v- car peut également être utilisé dans un modèle, mais je ne veux pas faire cela, j'ai écrit

Je pense que vous maîtrisez la méthode après avoir lu le cas dans cet article. Pour des informations plus intéressantes, veuillez faire attention aux autres. articles connexes sur le site php chinois !

Lecture recommandée :

Comment effectuer une liaison bidirectionnelle simple mvvm dans des projets pratiques

Comment utiliser JS pour avoir les 7 derniers jours et les 3 derniers jours

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!

Déclaration：

Le contenu de cet article est volontairement contribué par les internautes et les droits d'auteur appartiennent à l'auteur original. Ce site n'assume aucune responsabilité légale correspondante. Si vous trouvez un contenu suspecté de plagiat ou de contrefaçon, veuillez contacter admin@php.cn

Article précédent：Utilisation de l'attribut DefinProperty de vueArticle suivant：Utilisation de l'attribut DefinProperty de vue

Articles Liés

Voir plus