How to use index to add a class to the first item in v-for through Vuejs and what are the specific steps?

Below I will share with you an article on how to use index to add a class to the first item in Vuejs in v-for. It has a good reference value and I hope it will be helpful to everyone.

(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 the traversed array, and index represents the 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 is originally false (0), and the second item and the subsequent item are 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.

The above is what I compiled for everyone. I hope it will be helpful to everyone in the future.

Related articles:

Analysis of the source code example of Angular Component

Example of storage method of original value and reference value in JS Detailed explanation

Vue custom filter formats three digits plus a comma implementation code

The above is the detailed content of How to use index to add a class to the first item in v-for through Vuejs and what are the specific steps?. For more information, please follow other related articles on the PHP Chinese website!