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

Posted 2023-02-23

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

【英文标题】：How can I add a element everytime after 4 elements in Vue.js?

【发布时间】：2017-08-30 15:34:57

【问题描述】：

我正在将我的代码迁移到 Vue.js，这对 Vue 来说非常新。正如你看到的截图（下面的链接），在 div 中有 4 列 columns 类名。我试图使用 v-if 有条件地添加 div(class 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>

【问题讨论】：

v-if="items.length === <whatever>"?

@AmreshVenugopal 这只能工作一次。 v-if 循环中没有 v-for 循环

如果 items.length === 某个特定数字或 ?

，您希望添加 .columns

今天在 SO 上有很多类似的问题。我会问同样的问题；你有什么理由将物品分成不同的容器？你也许可以使用 CSS 来实现你想要的。

@Phil 我正在使用 bulma css 框架，所以我只是遵循指南！

【参考方案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>

【讨论】：

但我想在 for 循环之外使用索引。正如你看到的代码