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

我正在将我的代码移植到Vue.js，这对Vue来说非常新颖。正如你所看到的截图（下面的链接），div里有4列与columns类名称。我试图使用v-if来有条件地添加div（类columns），但我不知道如何在Vue中获得一长度的列元素。如何在Vue.js中的4个元素之后每次添加一个元素？

This is What I'm trying to make

示例代码

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

来源

2017-04-05 yaomohi

'V-IF = “items.length ===” '？ –

@AmreshVenugopal这只会工作一次。 v-for循环中没有v-for循环 – yaomohi

如果items.length ==='某个特定的数字或？ –

您可以访问V-像这样的迭代次数：

变化

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

来源

2017-04-05 08:40:16 wostex

但我想使用for循环的索引。正如你看到的代码 – yaomohi

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

回答

相关问题