Как привязать класс к последнему элементу массива в vue

Question

У меня есть массив для отображения, как показано ниже:

<div v-for="(n, index) in animals" :id="index" class="zoo" :class="`animal-${index}`"></div>

Я хочу добавить класс last-animal к последнему элементу животных, но я не знаю, как это можно сделать в литералах шаблона.

Answer 1

Вместо того чтобы пытаться сделать это программно, вы должны иметь возможность использовать CSS :last-child селектор

.zoo:last-child:after { /* this is your "last-animal" */
  content: ', oh my!';
}
.animal-0:before {
  content: '?';
}
.animal-1:before {
  content: '?';
}
.animal-2:before {
  content: '?';
}

<main>
<div id="0" class="zoo animal-0"></div>
<div id="1" class="zoo animal-1"></div>
<div id="2" class="zoo animal-2"></div>
</main>

Answer 2

Вы можете использовать условие здесь

<div v-for="(n, index) in animals" 
     :id="index" class="zoo" 
    :class="{index === animals.length - 1 ? 'last-animal' : `animal-${index}`}">
</div>