Instructions de boucle Vue.js

Dans Vue, les instructions de boucle sont principalement mises en œuvre via la directive v-for, utilisées pour parcourir des tableaux ou des objets, générant un nombre correspondant d'éléments.

Utilisez la directive v-for sur un élément pour afficher des éléments en boucle en fonction du tableau ou de l'objet de données source.

Itération sur un tableau :

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

Itération sur un objet :

v-for="(value, key, index) in object"

  • Le rôle de keyUtilisation :v-forLors du rendu d'une liste, vous devez fournir unkeyattribut unique, afin que Vue puisse reconnaître l'unicité de chaque élément et effectuer des mises à jour DOM efficaces.

  • Boucles imbriquées: Plusieurs peuvent être imbriquéesv-forpour afficher des tableaux multidimensionnels ou des structures d'objets.

v-for peut lier des données à un tableau pour afficher une liste :

Exemple de v-for

<div id="app">
  <ol>
    <li v-for="site in sites">
      {{ site.text }}
    </li>
  </ol>
</div>
<script>
const app = {
  data() {
    return {
      sites: [
        { text: 'Google' },
        { text: 'Example' },
        { text: 'Taobao' }
      ]
    }
  }
}

Vue.createApp(app).mount('#app')
</script>

Essayez-le vous-même »

v-for prend également en charge un deuxième paramètre facultatif, dont la valeur est l'index de l'élément actuel :

Exemple de v-for

index est la valeur d'index de l'élément de liste :

<div id="app">
  <ol>
    <li v-for="(site, index) in sites">
      {{ index }} -{{ site.text }}
    </li>
  </ol>
</div>
<script>
const app = {
  data() {
    return {
      sites: [
        { text: 'Google' },
        { text: 'Example' },
        { text: 'Taobao' }
      ]
    }
  }
}

Vue.createApp(app).mount('#app')
</script>

Essayez-le vous-même »

Utilisation de v-for dans l'élément <template> :

v-for

<ul> <template v-for="site in sites"> <li>{{ site.text }}</li> <li>--------------</li> </template> </ul>

Essayez-le vous-même »

v-for Itération sur les objets

v-for peut parcourir les données via les propriétés d'un objet :

v-for

<div id="app"> <ul> <li v-for="value in object"> {{ value }} </li> </ul> </div> <script>const app = { data() { return { object: { name: 'Rookie Tutorial', url: 'http://www.example.com', slogan: 'Ce que vous apprenez est non seulement la technologie, mais aussi les rêves !' } } } } Vue.createApp(app).mount('#app')</script>

Essayez-le vous-même »

Vous pouvez également fournir le deuxième paramètre en tant que nom de clé :

v-for

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

Essayez-le vous-même »

Le troisième paramètre est l'index :

v-for

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

Essayez-le vous-même »

v-for : itération sur des entiers

v-for peut aussi itérer sur des entiers

v-for

<div id="app"> <ul> <li v-for="n in 10"> {{ n }} </li> </ul> </div>

Essayez-le vous-même »

Affichage des résultats filtrés/triés

Nous pouvons traiter les éléments d'un tableau avant de les afficher. Généralement, nous pouvons créer une propriété calculée pour renvoyer le tableau filtré ou trié.

Exemple de v-for

Afficher les nombres pairs dans le tableau :

<div id="app"> <ul> <li v-for="n in evenNumbers">{{ n }}</li> </ul> </div>

Essayez-le vous-même »

Utilisation conjointe de v-for/v-if

L'exemple ci-dessus utilise v-for/v-if ensemble pour définir une valeur par défaut pour le select :

Exemple v-for/v-if

v-for parcourt la liste, v-if définit la valeur sélectionnée :

<div id="app"> <select @change="changeVal($event)" v-model="selOption"> <template v-for="(site,index) in sites" :site="site" :index="index" :key="site.id"> <!--L'élément avec l'index 1 est défini comme valeur par défaut ; les valeurs d'index commencent à 0.--> <option v-if = "index == 1" :value="site.name" selected>{{site.name}}</option> <option v-else :value="site.name">{{site.name}}</option> </template> </select> <div>Vous avez sélectionné : {{selOption}}</div> </div> <script>const app = { data() { return { selOption: "Example", sites: [ {id:1,name:"Google"}, {id:2,name:"Example"}, {id:3,name:"Taobao"}, ] } }, methods:{ changeVal:function(event){ this.selOption = event.target.value; alert("you选Mediumalready"+this.selOption); } } } Vue.createApp(app).mount('#app')</script>

Essayez-le vous-même »

Utilisation de v-for sur les composants

Si vous n'avez pas encore appris les composants, vous pouvez ignorer cette section.

Sur les composants personnalisés, vous pouvez utiliser v-for comme sur n'importe quel élément normal :

<my-component v-for="item in items" :key="item.id"></my-component>

Cependant, aucune donnée ne sera automatiquement transmise au composant, car le composant a sa propre portée indépendante. Pour transmettre les données itérées au composant, nous devons utiliser des props :

<my-component
  v-for="(item, index) in items"
  :item="item"
  :index="index"
  :key="item.id"
></my-component>

La raison pour laquelle item n'est pas automatiquement injecté dans le composant est que cela couplerait étroitement le composant au fonctionnement de v-for. Rendre explicite la source des données du composant permet de réutiliser le composant dans d'autres situations.

Voici un exemple complet d'une simple liste de tâches :

Exemple

<div id="todo-list-example"> <form v-on:submit.prevent="addNewTodo"> <label for="new-todo">Ajouter une tâche</label> <input v-model="newTodoText" id="new-todo" placeholder="Par ex. Nourrir le chat" /> <button>Ajouter</button> </form> <ul> <todo-item v-for="(todo, index) in todos" :key="todo.id" :title="todo.title" @remove="todos.splice(index, 1)" ></todo-item> </ul> </div>

Essayez-le vous-même »
Autres extensions