如何使用Vue實現這個功能？

-1

我正在將我的代碼移植到Vue.js，這對Vue來說非常新穎。正如你所看到的截圖（下面的鏈接），div裏有4列與columns類名稱。和我試圖使用索引，如v-if='index % 4 === 0'，但我無法訪問索引出v-for循環。如何使用Vue實現這個功能？

這就是我想要做的。 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>

來源

2017-04-05 yaomohi

爲什麼你會渲染與v中的項目相關的東西 - for v-for？ – Potray

@Potray你認爲還有其他方法可以做到這一點嗎？檢查這個https://i.stack.imgur.com/aO2Rx.png並告訴我吧！ – yaomohi

不知道「項目」的內容 – Potray

您可以首先將在適當規模的團體項目。例如，假設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>`

來源

2017-04-05 13:52:36 wale

如何使用Vue實現這個功能？

回答

相關問題