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

Question

我正在将我的代码移植到Vue.js，这对Vue来说是个新手。当您看到屏幕截图（下面的链接）时，div中有4列，columns类名。我试图使用v-if有条件地添加div（类columns），但我不知道如何在Vue中获取一些列元素。

示例代码

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

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