Maison >interface Web >Voir.js >Comment utiliser l'instruction v-for pour boucler les données de sortie dans Vue
Vue est un framework frontal populaire qui fournit de nombreuses directives puissantes pour gérer facilement les vues et les données. L'une des instructions les plus couramment utilisées est v-for, qui peut parcourir les données et les générer. Dans cet article, nous apprendrons comment parcourir les données à l'aide de la directive v-for dans Vue.
Tout d’abord, jetons un coup d’œil à l’utilisation de v-for. La syntaxe de base est la suivante :
<template> <ul> <li v-for="(item, index) in list" :key="index">{{ item }}</li> </ul> </template>
Dans le code ci-dessus, nous utilisons l'instruction v-for
pour parcourir les données du tableau list
et les afficher sous forme li éléments. L'instruction v-for
se compose de trois parties : v-for="(item, index) in list"
. Parmi eux, (item, index)
est l'élément et l'index définis, qui peuvent être modifiés en fonction des besoins. list
est le tableau de données en boucle. v-for
指令将list
数组中的数据循环遍历,并输出为li元素。v-for
指令由三部分组成:v-for="(item, index) in list"
。其中,(item, index)
是定义的项和索引,可以根据需求自行更改。list
是被循环的数据数组。
key
key
est obligatoire et doit être unique. Il est utilisé par Vue pour identifier les éléments DOM afin de rendre les composants plus rapidement. Vue avertira si l'attribut key n'est pas défini, alors assurez-vous de définir l'attribut key. Ensuite, examinons quelques exemples spécifiques pour montrer comment utiliser l'instruction v-for pour boucler les données dans Vue. 1. Parcourez le tableau et affichez une liste Dans cet exemple, nous utiliserons l'instruction v-for pour parcourir un tableau et l'afficher sous forme de liste. Dans cet exemple, nous utilisons l'opérateur spread dans ES6 pour répartir le tableau. <template> <div> <ul> <li v-for="(item, index) in list" :key="index">{{ item }}</li> </ul> </div> </template> <script> export default { data() { return { list: ['foo', 'bar', 'baz'] } } } </script>Dans l'exemple ci-dessus, nous avons créé un tableau et l'avons transmis à la propriété data de l'instance Vue. Ensuite, nous utilisons la directive v-for pour parcourir chaque élément du tableau et le restituer sous forme de liste. 2. Parcourez l'objet et affichez une liste Dans cet exemple, nous utiliserons l'instruction v-for pour parcourir un objet et l'afficher sous forme de liste. Nous avons utilisé la clé et la valeur dans l'objet pour afficher les éléments de la liste et définir la propriété key sur le nom de la clé.
<template> <div> <ul> <li v-for="(value, key, index) in obj" :key="key">{{ key }} - {{ value }}</li> </ul> </div> </template> <script> export default { data() { return { obj: { foo: 'Foo', bar: 'Bar', baz: 'Baz' } } } } </script>Dans l'exemple ci-dessus, nous avons créé un objet et l'avons transmis à la propriété data de l'instance Vue. Nous utilisons ensuite la directive v-for pour parcourir chaque paire clé-valeur de l'objet et les restituer sous forme de liste. 3. Parcourez les nombres et affichez une listeDans cet exemple, nous utiliserons l'instruction v-for pour parcourir un nombre et le générer sous forme de liste. Dans v-for, nous bouclons les nombres dans un tableau, puis comptons en utilisant l'index de l'élément dans le tableau.
<template> <div> <ul> <li v-for="(item, index) in 5" :key="index">{{ index + 1 }}</li> </ul> </div> </template>Dans l'exemple ci-dessus, nous utilisons l'instruction v-for pour boucler les nombres dans un tableau de longueur 5 et le générer sous forme de liste. Nous utilisons la variable index pour compter et l'ajoutons à 1 pour obtenir le numéro de séquence. 4. Parcourez le tableau et génèrez un tableauDans cet exemple, nous utiliserons l'instruction v-for pour parcourir un tableau et le générer sous forme de tableau HTML. Nous avons utilisé des propriétés calculées pour diviser le tableau imbriqué en éléments de données individuels.
<template> <div> <table> <thead> <tr> <th>Name</th> <th>Age</th> <th>Gender</th> </tr> </thead> <tbody> <tr v-for="(item, index) in flattenedList" :key="index"> <td>{{ item.name }}</td> <td>{{ item.age }}</td> <td>{{ item.gender }}</td> </tr> </tbody> </table> </div> </template> <script> export default { data() { return { list: [ { name: 'Alice', age: 22, gender: 'Female' }, { name: 'Bob', age: 25, gender: 'Male' }, { name: 'Charlie', age: 30, gender: 'Male' }, { name: 'Diana', age: 27, gender: 'Female' } ] } }, computed: { flattenedList() { return this.list.flatMap(item => [item.name, item.age, item.gender]) } } } </script>Dans l'exemple ci-dessus, nous avons créé un tableau de quatre objets et l'avons transmis à la propriété data de l'instance Vue. Nous le divisons ensuite dans une propriété calculée, convertissant les éléments de données imbriqués en un seul élément de données. Ensuite, nous utilisons la directive v-for pour parcourir le nouveau tableau et le restituer sous forme de tableau HTML. RésuméDans Vue, il est très simple d'utiliser l'instruction v-for pour boucler les données. Il vous suffit de suivre la syntaxe de base et, armé des bonnes données, vous pouvez commencer à créer des modèles complexes. Que vous parcouriez un tableau simple ou une structure de données imbriquée plus complexe, la directive v-for peut vous aider à les gérer. 🎜
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!