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, and notes on using index to add class to the first item in Vuejs What are they? Here are actual cases. Let’s take a look.

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

to the first item View code snippets on CODE Derived to my code snippet

<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}"

The first 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 without 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:

How to deal with null parameters in post in vue

##axios cannot accept springMVC when sending a post request How to handle parameters

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