Heim > Web-Frontend > H5-Tutorial > So verwenden Sie den Index, um dem ersten Element in Vuejs eine Klasse hinzuzufügen

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

php中世界最好的语言
Freigeben: 2018-03-27 16:35:18
Original
2265 Leute haben es durchsucht

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">
Nach dem Login kopieren

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!

Verwandte Etiketten:
Quelle:php.cn
Erklärung dieser Website
Der Inhalt dieses Artikels wird freiwillig von Internetnutzern beigesteuert und das Urheberrecht liegt beim ursprünglichen Autor. Diese Website übernimmt keine entsprechende rechtliche Verantwortung. Wenn Sie Inhalte finden, bei denen der Verdacht eines Plagiats oder einer Rechtsverletzung besteht, wenden Sie sich bitte an admin@php.cn
Beliebte Tutorials
Mehr>
Neueste Downloads
Mehr>
Web-Effekte
Quellcode der Website
Website-Materialien
Frontend-Vorlage