首页 文章

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

提问于
浏览 次
0

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

This is What I'm trying to make

Example Code

<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>
javascript jquery vue.js vuejs2 vue-component

1 回答

  • 0

    您可以像这样访问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 ：

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

相关问题