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