如何将类绑定到vue中的数组的最后一项

Question

我有一个要显示的数组，如下所示：

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

我想将last-animal类添加到动物的最后一项，但是我不知道如何在模板文字中完成它。

Answer 1

您可以在此处使用条件

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

Answer 2

您应该能够使用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>