如何在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個元素之後每次添加一個元素？

回答

相關問題