Question

我在Vue.js中创建一个表并使用v-for指令呈现一些列：

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

有一个未知的元素计数，我必须在最后一个渲染元素中添加一个类。我无法使用:last-child或:last-of-type因为它不是行中的最后一个<td>元素，它只是带有v-for的最后一个呈现元素，但也有<td>跟随the_string_var = request(your_form_data) 1}}元素。

我们怎样才能在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课程：

.active {
   //some style
}

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

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

工作示例：

＆＃13;

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

＆＃13;

.active {
  color: red;
}

＆＃13;

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

＆＃13;

根据条件添加类（对于带有v-for的最后渲染元素）

1 个答案: