Bagaimana saya harus menggunakan atribut ke kelas untuk menata hanya untuk elemen-elemen tertentu dalam daftar? Akan lebih jelas dalam contoh di bawah ini:

<u-col
    v-for="(item, i) in items"
    :key="i"
    :class="classNames.viewport"
>

data () {
    return {
        classNames: {
            viewport: "col-lg-3 col-md-3 col-sm-3 col-6 d-flex justify-content-center"
        }
    }
}

Dengan asumsi i hanya berjalan dari 0-3. Saat ini setiap item in v-for memiliki kelas viewport untuk styling. Apa yang ingin saya capai adalah dengan hanya menerapkan gaya margin tambahan mb-3 jika i lebih besar dari 1.

Yaitu, viewport menjadi "col-lg-3 col-md-3 col-sm-3 col-6 d-flex justify-content-center mb-3" untuk item dengan i & gt; 1, sedangkan viewport tidak mengandung mb-3 untuk item dengan i & lt; 1.

Saya berpikir tentang menggunakan v-for dan v-if bersama-sama tetapi saya percaya itu bukan praktik yang baik untuk melakukannya, https://www.codecheef.org/article/dont-use-v-if--elef-forelements .

0
Mark 28 Mei 2021, 23:45

3 jawaban

Jawaban Terbaik

Dalam :class Bind, Anda dapat memeriksa i dan menambahkan mb-3 ke kelas saat i > 1:

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

Anda dapat menggunakan vue's binding kelas dan lulus itu objek.

<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,
    }"
/>
1
SubXaero 28 Mei 2021, 21:08

Coba seperti ini

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

1
Naren 28 Mei 2021, 20:59