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

Cette fois, je vais vous apporter les Notes sur l'utilisation de l'index pour ajouter une class au premier élément dans Vuejs et sur l'utilisation de l'index pour ajouter une classe au premier élément dans Vuejs Quels sont-ils ? Voici des cas concrets.

(1) Dans v-for, utilisez index pour ajouter class

au premier élément Afficher les extraits de code sur CODE Dérivés de mes extraits 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 traversé, 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}"

Le premier é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 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, elle peut également être obtenue sans ajouter l'opérateur logique NOT.

De même, vous pouvez utiliser une expression comme 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 :

Comment gérer les paramètres nuls dans la publication dans vue

axios ne peut pas accepter la demande de publication springMVC Comment gérer les paramètres

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!