Comment utiliser index pour ajouter une classe au premier élément dans v-for via Vuejs et quelles sont les étapes spécifiques ?

Ci-dessous, je vais partager avec vous un article sur la façon d'utiliser l'index pour ajouter une classe au premier élément dans Vuejs dans v-for. Il a une bonne valeur de référence et j'espère qu'il sera utile à tout le monde.

(1) Dans v-for, utilisez index pour ajouter une classe au premier élément

Affichez le morceau de code sur CODE pour le dériver Mon morceau de code

<a class="list-group-item" :class="{&#39;active&#39;:!index}" v-for="(i,index) in announcement">

index vient de v-for, i représente l'élément du tableau parcouru et index représente l'index.

Puisque l'index commence à 0, si vous souhaitez spécifier que le premier élément a la classe active, utilisez v-bind:class="{'active':!index}"

Un élément est à l'origine faux (0), et le deuxième élément et l'élément suivant sont vrais (>0). Leurs valeurs sont inversées via l'opérateur logique NOT.

Par conséquent, le premier élément a la classe active, mais pas les éléments suivants.

S'il existe une classe autre que le premier élément, cela peut également être obtenu en n'ajoutant pas l'opérateur logique NOT.

De même, vous pouvez utiliser une expression telle que index==2 pour laisser le troisième élément obtenir cette classe.

Remarque, Ma version est Vuejs2.0, il semble donc qu'elle ne puisse pas être remplacée par $index.

J'ai compilé ce qui précède pour vous, j'espère que cela vous sera utile à l'avenir.

Articles associés :

Analyse de l'exemple de code source du composant angulaire

Exemple de méthode de stockage de la valeur d'origine et valeur de référence dans JS Explication détaillée

Filtre personnalisé Vue formatant trois chiffres plus un code d'implémentation de virgule

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!