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

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

示例代码

  .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  

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' : ''" 

例如，注入一个跨度：

 after 4