根据条件添加 class（最后使用 v-for 渲染的元素）

Question

我正在 Vue.js 中创建一个 table 并使用 v-for 指令渲染一些列：

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

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

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

Answer 1

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

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

CSS class:

.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>

根据条件添加 class（最后使用 v-for 渲染的元素）

Add class based on condition (for last rendered element with v-for)

javascript

vue.js

v-for