Comment utiliser l'index pour ajouter une classe au premier élément dans Vuejs

Cette fois, je vais vous présenter la méthode d'utilisation de l'index pour ajouter une classe au premier élément dans Vuejs. Il existe des notes pour utiliser l'index pour ajouter une classe au premier élément de Vuejs. Vuejs. Lesquels, les suivants sont des cas pratiques, jetons un coup d'œil.

(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 le 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 était à l'origine faux (0), et le deuxième élément et l'élément suivant étaient vrais (>0). Leurs valeurs sont inversées via l'opérateur de négation logique .

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.

Je pense que vous maîtrisez la méthode après avoir lu le cas dans cet article. Pour des informations plus intéressantes, veuillez prêter attention aux autres articles connexes sur le site Web chinois de php !

Lecture recommandée :

L'application côté Web implémente l'actualisation de la force arrière

Explication détaillée du traitement et de la synthèse d'images JS

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!