Comment utiliser la directive v-for dans la documentation Vue

Vue est un framework JavaScript populaire pour créer des applications Web interactives. Parmi elles, l'instruction v-for de Vue est l'une des instructions importantes utilisées pour boucler les données de rendu. Dans cet article, nous présenterons l'utilisation de la directive v-for dans la documentation Vue.

La directive v-for peut nous aider à restituer et traiter à plusieurs reprises des données similaires dans notre application. Son format de syntaxe est le suivant :

v-for="(item, index) in items"

Parmi eux, "items" est la collection de données que nous voulons boucler et restituer, qui peut être un tableau ou un objet. Pendant la boucle, nous pouvons utiliser "item" pour représenter l'élément en cours de traitement, et "index" pour représenter la valeur d'index de l'élément en cours.

Voici un exemple d'utilisation de la directive v-for pour restituer un tableau :

<script>
export default {
  data() {
    return {
      items: ['苹果', '香蕉', '橙子']
    }
  }
}
</script>

Dans cet exemple, nous utilisons la directive v-for pour restituer une liste non ordonnée avec trois éléments de liste. Pendant la boucle, nous utilisons "item" pour représenter l'élément actuel dans le tableau et "index" pour représenter la valeur d'index de l'élément actuel. En même temps, nous utilisons la directive ":key" pour fournir un identifiant unique pour chaque élément de la liste rendue.

En plus des tableaux, la directive v-for peut également être utilisée pour restituer les propriétés des objets. Voici un exemple de rendu des propriétés d'un objet :

<template>
  <div>
    <ul>
      <li v-for="(value, key) in object" :key="key">{{ key }}: {{ value }}</li>
    </ul>
  </div>
</template>

<script>
export default {
  data() {
    return {
      object: {
        name: '李雷',
        age: 30,
        location: '中国北京'
      }
    }
  }
}
</script>

Dans cet exemple, nous rendons les propriétés d'un objet. Pendant la boucle, nous utilisons "value" pour représenter la valeur de l'attribut actuel, et "key" pour représenter le nom de l'attribut actuel. Encore une fois, nous utilisons la directive ":key" pour fournir un identifiant unique pour chaque élément de la liste rendue.

En plus des boucles de base, la directive v-for prend également en charge l'utilisation de propriétés et de méthodes calculées pour implémenter le rendu dynamique. Voici un exemple d'utilisation de propriétés calculées pour restituer des données :

<template>
  <div>
    <ul>
      <li v-for="(item, index) in computedItems" :key="index">{{ item }}</li>
    </ul>
  </div>
</template>

<script>
export default {
  data() {
    return {
      items: ['苹果', '香蕉', '橙子']
    }
  },
  computed: {
    computedItems() {
      return this.items.map((item) => {
        return item.toUpperCase()
      })
    }
  }
}
</script>

Dans cet exemple, nous utilisons la propriété calculée "computedItems" pour renvoyer un nouveau tableau avec tous les éléments du tableau d'origine convertis en lettres majuscules. Nous utilisons ensuite la directive v-for pour restituer la valeur de cette propriété calculée.

La directive v-for prend également en charge l'utilisation de la directive v-if pour implémenter le rendu conditionnel. Voici un exemple de rendu de données à l'aide de la directive v-if :

<script>
export default {
  data() {
    return {
      items: ['苹果', '香蕉', '橙子', '草莓', '西瓜']
    }
  }
}
</script>

Dans cet exemple, nous rendons les éléments impairs d'un tableau. Pendant la boucle, nous utilisons l'instruction v-if pour déterminer si l'index de l'élément actuel est un nombre pair. S'il s'agit d'un nombre pair, la valeur de l'élément actuel est restituée, sinon l'élément actuel n'est pas restitué.

En bref, l'instruction v-for est l'une des instructions importantes de Vue utilisées pour implémenter les données de rendu en boucle. Grâce à l'introduction ci-dessus, je pense que vous maîtrisez comment utiliser l'instruction v-for dans Vue. Dans le développement réel, nous pouvons choisir différentes méthodes de boucle en fonction de situations spécifiques et les utiliser avec d'autres instructions et composants pour créer des applications Web plus flexibles et plus efficaces.

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!