Quatre types de données de boucle v-for dans VUE, et l'ordre des paramètres associés, et précautions de v-for

v-for in vue peut boucler quatre types de données, à savoir les nombres, les chaînes, les tableaux, les objets

Tout d'abord, v-for est un attribut, qui est une extension de l'attribut d'un élément. N'oubliez pas que c'est v-for = "", pas v-for: "".
Ensuite, la valeur de l'attribut v-for est une expression, et les paramètres à l'intérieur sont séparés par des virgules au lieu d'espaces.

Un: numéro de cycle v-for

<li v-for='num in 10'>{{ num }}</li>

Deux: chaîne de boucle v-for

<li v-for="str in 'haha'">{{ str }}</li>

Trois: réseau de boucles v-for

<div id="test">
        <ul>
            <li v-for='(item,index) in arr'>{{ item }}---{{ index }}</li>
        </ul>
    </div>
    <script>
        const vm = new Vue({
            el: "#test",
            data: {
                arr: ['apple', 'orange', 'banana'],
            }
        })
    </script>

L'élément ci-dessus, index est une manière sémantique d'écrire, non fixe, il peut être a, b, c, l'ordre est le contenu du tableau, l'index du tableau

Quatre: objet de boucle v-for

<div id="test">
        <ul>
            <li v-for='(value,key,index) in obj'>{{ value }}---{{ key }}---{{ index }}</li>
        </ul>
    </div>
    <script>
        const vm = new Vue({
            el: "#test",
            data: {
                obj: {
                    name: "zhangsan",
                    age: 18,
                    sex: '男'
                }
            }
        })
    </script>

Le premier est la valeur, le second est la clé et le troisième est l'indice

Explication de l'ordre des paramètres dans les tableaux et les objets

1. Tous les cycles, le but principal est d'obtenir la valeur
de l'élément 2. La deuxième est la clé
de l'élément 3. Enfin, l'indice de l'élément
Vous pouvez vous fier à cette règle pour vous souvenir de l'ordre des paramètres