Wie füge ich mit dem Index über Vuejs eine Klasse zum ersten Element in v-for hinzu und was sind die spezifischen Schritte?

Im Folgenden werde ich einen Artikel darüber teilen, wie man mit dem Index eine Klasse zum ersten Element in Vuejs in v-for hinzufügt. Er hat einen guten Referenzwert und ich hoffe, dass er für alle hilfreich sein wird.

(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 Arrays, das durchlaufen wird, 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 ist ursprünglich falsch (0), und das zweite Element und das nachfolgende Element sind wahr (>0). Ihre Werte werden durch den logischen NOT-Operator 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 habe das Obige für Sie zusammengestellt und hoffe, dass es Ihnen in Zukunft hilfreich sein wird.

Verwandte Artikel:

Analyse des Quellcodebeispiels von Angular Component

Beispiel für die Speichermethode des Originalwerts und Referenzwert in JS Ausführliche Erklärung

Benutzerdefinierter Vue-Filter, der drei Ziffern plus einen Komma-Implementierungscode formatiert

Das obige ist der detaillierte Inhalt vonWie füge ich mit dem Index über Vuejs eine Klasse zum ersten Element in v-for hinzu und was sind die spezifischen Schritte?. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!