如何在Vue.js中的4个元素之后每次添加一个元素? [英] How can I add a element everytime after 4 elements in Vue.js?

问题描述

我正在将代码迁移到Vue.js，这对Vue来说还很新.如您所见，屏幕截图(下面的链接)显示，div内有4列，其类名称为columns.我试图使用v-if有条件地添加div(class columns)，但我不知道如何在Vue中获取列元素的长度.

I'm immigrating my code to Vue.js so pretty new to Vue. As you see the screenshot(link below), There are 4 columns inside div with columns class name. I was trying to use v-if to add the div(class columns) conditionally but I have no idea how to get a length of columns elements in 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- for迭代编号，如下所示:

You can access v-for iteration number like this:

更改

 .column.is-3.vid(v-for='item in items')

到

.column.is-3.vid(v-for='(item, index) in items')

然后在需要的地方检查索引:

then somewhere where you need it check the index:

v-if="(index % 4 === 0) ? 'show it after every 4 elements' : ''"

例如，注入一个跨度:

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

这篇关于如何在Vue.js中的4个元素之后每次添加一个元素?的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！