根据条件添加类（对于使用 v-for 的最后呈现的元素）

Posted 2023-02-16

【中文标题】根据条件添加类（对于使用 v-for 的最后呈现的元素）

【英文标题】：Add class based on condition (for last rendered element with v-for)

【发布时间】：2018-03-13 08:22:21

【问题描述】：

我正在 Vue.js 中制作一个表格并使用 v-for 指令渲染一些列：

<td v-for="(item, index) in items">  item.name  </td>

有一个未知的元素计数，我必须为最后渲染的元素添加一个类。我不能使用:last-child 或:last-of-type，因为它不是连续的最后一个<td> 元素，它只是带有v-for 的最后一个渲染元素，但也有以下<td> 元素。

我们如何在 Vue.js 中实现这一点？

【参考方案1】：

你必须使用v-bind:class 指令。

<td v-for="(item, index) in items"
    v-bind:class=" active: index==items.length-1 ">  item.name  </td>

CSS 类：

.active 
   //some style

解决方案是检查元素的index是否等于items.length-1

v-bind:class=" active: index==items.length-1 "

工作示例：

new Vue(
  el: '#app',
  data: 
    items:["name":"A","name":"B","name":"C"]
  
)

.active 
  color: red;

<script src="https://unpkg.com/vue"></script>

<div id="app">
  <table>
    <tr>
      <td v-for="(item, index) in items"
          v-bind:class=" active: index==items.length-1 ">  item.name  </td>
    </tr>
  </table>
</div>