Question

我正在将我的代码移植到Vue.js，这对Vue来说是个新手。当您看到屏幕截图（下面的链接）时，div中有4列，columns类名。我试图使用索引，如v-if='index % 4 === 0'但我无法访问v-for循环中的索引。

这就是我想要做的。 https://i.stack.imgur.com/aO2Rx.png

<template lang="pug">
.container
  .columns // add this after every 4 coulmns
    .column.is-3.vid(v-for='(item,index) 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
                span {{ item.score }}
                i.fa.fa-reddit-alien.fa-2x
              .panel-item.reddit-date
                i.fa.fa-calendar.fa-2x
</template>

Answer 1

您可以先将项目分成适当大小的组。例如，假设items是数字上的数组 `

var items = [1,2,3,4,5,6,7,8,9,10]
groupsLen = Math.ceil(items.length / 4)
var groups = [];
for(var i = 0; i < groupsLen; i++){
    var start = i * 4;
    var end = start + 4;
    groups.push(items.slice(start, end))
}

` 然后你的模板看起来像这样（每个项目作为一个对象）

`

<template lang="pug">
.container
  .columns(v-for="group in groups") // add this after every 4 coulmns
    .column.is-3.vid(v-for='(item) in group')
      .panel
        p.is-marginless
         a(:href='item.videoId')
           img(:src='item.thumbnail')
        .panel.vidInfo
          .columns.hax-text-centered
            .column
              .panel-item.reddit-ups
                span {{ item.score }}
                i.fa.fa-reddit-alien.fa-2x
              .panel-item.reddit-date
                i.fa.fa-calendar.fa-2x
</template>`

如何使用Vue实现此功能？

1 个答案: