По модулю в цикле v-for - PullRequest
Новая
       11

По модулю в цикле v-for

0 голосов
/ 02 ноября 2018

Я показываю div в цикле, и я хочу связать класс в зависимости от индекса цикла. Итак, я хочу добиться, чтобы индексы 0 и 1 имели класс col-6, затем 2,3,4 имели индекс col-4, а затем 5 и 6 имели класс col-6 и т. Д.

Таким образом, в конце мои дивы выглядят так: 

div.col-6 div.col-6
div.col-4 div.col-4 div.col-4
div.col-6 div.col-6
div.col-4 div.col-4 div.col-4
div.col-6 div.col-6

и т. Д.

Я не могу найти шаблон, чтобы сделать это, я попытался по модулю, но без удачи. На данный момент мой код: 

<div v-for="(n, index) in imagesArr" :class="index === 0 || index === 1 ? 'col-6' : 'col-4'" style="padding: .5rem">
    <img :src="n" :alt="'Zdjęcie jachtu nr ' + index" class="img-fluid">
</div>

Конечно, я могу проверить, как указано выше, для каждого индекса, но он будет выглядеть ужасно, так как этот цикл длинный, поэтому я ищу другой путь.

1 Ответ

0 голосов
/ 02 ноября 2018

Я бы предложил создать вычисляемое свойство 

computed: {    
    classNameByIndex: function (index) {
      return index % 5 == (0 || 1) ? 'col-6' : 'col-4';
    }
  }

Это будет для 0, 1 возвращать 'col-6', а для 2, 3, 4 - 'col-4', а при использовании moduo он будет делать то же самое для 5, 6, возвращать 'col-6' и для 7, 8, 9 вернуть 'col-4' и т. д.

...