So verwenden Sie den Index, um dem ersten Element in Vuejs eine Klasse hinzuzufügen

Dieses Mal werde ich Ihnen die Methode zum Hinzufügen von Klasse zum ersten Element in Vuejs vorstellen. Es gibt Hinweise für die Verwendung des Index zum Hinzufügen von Klasse zum ersten Element in Vuejs. Die folgenden sind praktische Fälle, schauen wir uns das an.

(1) Verwenden Sie in v-for den Index, um dem ersten Element eine Klasse hinzuzufügen

Sehen Sie sich den Codeteil auf CODE an, der von My abgeleitet ist Codestück

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

Index kommt von v-for, i repräsentiert das Element des durchlaufenen Arrays und Index repräsentiert den Index .

Da der Index bei 0 beginnt, verwenden Sie v-bind:class="{'active':!index}"

, wenn Sie angeben möchten, dass das erste Element die aktive Klasse hat Ein Element war ursprünglich falsch (0), und das zweite Element und das folgende Element waren wahr (>0). Ihre Werte werden durch den logischen Negationsoperator umgekehrt.

Daher hat das erste Element die aktive Klasse, die folgenden Elemente jedoch nicht.

Wenn es eine andere Klasse als das erste Element gibt, kann dies auch dadurch erreicht werden, dass der logische NOT-Operator nicht hinzugefügt wird.

Ähnlich können Sie einen

Ausdruck wie index==2 verwenden, damit das dritte Element diese Klasse erhält.

Hinweis: Meine Version ist Vuejs2.0, daher kann sie anscheinend nicht durch $index ersetzt werden.

Ich glaube, dass Sie die Methode beherrschen, nachdem Sie den Fall in diesem Artikel gelesen haben. Weitere spannende Informationen finden Sie in anderen verwandten Artikeln auf der chinesischen PHP-Website.

Empfohlene Lektüre:

Webseitige Anwendung implementiert Back-Force-Aktualisierung

Detaillierte Erläuterung der JS-Bildverarbeitung und -synthese

Das obige ist der detaillierte Inhalt vonSo verwenden Sie den Index, um dem ersten Element in Vuejs eine Klasse hinzuzufügen. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!