如何在Vue.js中的4個元素之后每次添加一個元素？

Question

我正在將代碼遷移到Vue。 如您所見，屏幕快照（下面的鏈接）顯示，div內有4列， columns名稱為。 我試圖使用v-if有條件地添加div（class columns ），但是我不知道如何在Vue中獲取column元素的長度。

范例程式碼

<template lang="pug">
.container
  .columns(v-if="") // add this conditionally
    .column.is-3.vid(v-for='item in items')
      .panel
        p.is-marginless
         a(href=item.videoId)
           img(src=item.thumbnail)
        .panel.vidInfo
          .columns.hax-text-centered
            .column
              .panel-item.reddit-ups
                | item.score
                i.fa.fa-reddit-alien.fa-2x
              .panel-item.reddit-date
                i.fa.fa-calendar.fa-2x
</template>

Answer 1

您可以這樣訪問v-for迭代編號：

更改

 .column.is-3.vid(v-for='item in items')

至

.column.is-3.vid(v-for='(item, index) in items')

然后在您需要的地方檢查索引：

v-if="(index % 4 === 0) ? 'show it after every 4 elements' : ''"

例如，注入一個跨度：

<span v-if="index % 4 === 0">after 4</span>