Как добавить класс нескольким элементам в списке при использовании v-for (VueJS)?

Question

У меня есть спиcок из элементов в компоненте, которые выводятся циклом, но только последним трем необходимо добавить класс. Подскажите, пожалуйста, как это можно реализовать.

<div class="tabs">
  <ul>
    <li v-for="(tab, index) in tabs" :class="{ 'hide-mobile': index === 1, 'hide-mobile': index === 2,'hide-mobile': index === 3 }">
      <a :href="tab.href">{{ tab.name }}</a>
    </li>
  </ul>
</div>

Answer 1

<div class="tabs">
  <ul>
    <li v-for="(tab, index) in tabs" :key="tab.name"
      :class="{ 'hide-mobile': index >= tabsCount - 3 }"
    >
      <a :href="tab.href">{{ tab.name }}</a>
    </li>
  </ul>
</div>

computed: {
  tabsCount() {
    return this.tabs.length;
  },
  /* .... */
},

БЛОГ НА HUSL

Как добавить класс нескольким элементам в списке при использовании v-for (VueJS)?

Ответы (1 шт):