[Vuejs]-Apply styling to certain items in a list in Vue

by

1👍

✅

In :class bind, you can check i and add mb-3 to class when i > 1:

<u-col
    v-for="(item, i) in items"
    :key="i"
    :class="classNames.viewport + (i > 1 ? ' mb-3' : '')"
>
👤Psidom

1👍

Try like this

:class="`${classNames.viewport} ${i > 1 ? 'mb-3' : ''}`"
👤Naren

1👍

You can use Vue’s Class and Style bindings and pass it an object.

<u-col
    v-for="(item, i) in items"
    :key="i"
    :class="{
        'col-lg-3 col-md-3 col-sm-3 col-6 d-flex justify-content-center': true,
        'mb-3': i > 1,
    }"
/>
👤SubXaero

Leave a comment