[Vuejs]-Problem creating odd and even cell in a table in Vue Js

I refered to a UI framework which now I’m using, name as iView.

Of course, they also support striped table component. So I wondered how they do like that.

.ivu-table-stripe .ivu-table-body tr:nth-child(2n) td,
.ivu-table-stripe .ivu-table-fixed-body tr:nth-child(2n) td {
    background-color: #f8f8f9;
}

As you can see, CSS support for handling each case of even and odd by using nth-child(). There is no more simple way to do like that.

further more, you can use more complex formula as a parameter like this :
(an + b).

W3School Nth-child Example maybe helpful for you.

You can use index:

<div v-for="(item, index) in myData">
   <div v-if="" :class="{'odd-cell': index % 2 === 1, 'even-cell': index % 2 === 0}">
       <p> {{item.a}} </p>
       <p> {{item.b}} </p>
   </div>
</div>

But there are better solution with css nth-child

div:nth-child(odd) {
    background: red;
}

div:nth-child(even) {
    background: blue;
}