How to use index to add class to the first item in Vuejs

This time I will bring you how to use index to add class to the first item in Vuejs. Notes on using index to add class to the first item in Vuejsare Which ones, the following are practical cases, let’s take a look.

(1) In v-for, use index to add class to the first item

View the code piece on CODE derived to My code piece

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

index comes from v-for, i represents the element of array traversed, and index represents index.

Since index starts from 0, if you want to specify that the first item has the active class, then use v-bind:class="{'active':!index}"

One item was originally false (0), and the second item and the subsequent item were true (>0). Their values ​​are reversed through the logical NOT operator .

Therefore, the first item has the active class, but the following items do not.

If there is a class other than the first item, it can also be achieved by not adding the logical NOT operator.

Similarly, you can use an expression such as index==2 to let the third item obtain this class.

Note, My version is Vuejs2.0, so it seems that it cannot be replaced with $index.

I believe you have mastered the method after reading the case in this article. For more exciting information, please pay attention to other related articles on the php Chinese website!

Recommended reading:

Web-side application implements back force refresh

Detailed explanation of JS image processing and synthesis

The above is the detailed content of How to use index to add class to the first item in Vuejs. For more information, please follow other related articles on the PHP Chinese website!