2017-09-06 7 views
0

v-forを使用してループするデータがあります。しかし、モジュラスのようにcustom loopingを使ってデータを表示したいときは少し混乱します。vue for v-forのカスタムループデータ

私が望む結果は、three itemsのデータが表示され、groupingはの3つの項目ごとに表示されます。

私が欲しいデータ:

あなたが見
<div class="col-md-4 hidecontent data_1" content="#data_0">1 Blablablabla</div> 
<div class="col-md-4 hidecontent data_1" content="#data_1">1 Blablablabla</div> 
<div class="col-md-4 hidecontent data_1" content="#data_2">1 Blablablabla</div> 
<div class="col-md-4 hidecontent data_2" content="#data_3">2 Blablablabla</div> 
<div class="col-md-4 hidecontent data_2" content="#data_4">2 Blablablabla</div> 
<div class="col-md-4 hidecontent data_2" content="#data_5">2 Blablablabla</div> 
<div class="col-md-4 hidecontent data_3" content="#data_6">3 Blablablabla</div> 
<div class="col-md-4 hidecontent data_3" content="#data_7">3 Blablablabla</div> 
<div class="col-md-4 hidecontent data_3" content="#data_8">3 Blablablabla</div> 

data_1は3つの項目があります。 data_2は3つの項目があり、data_3は3つの項目

を持って

マイルーピングデータ:

<div class="col-md-4 hidecontent" v-for="(item, index) in this.$parent.items" :key="item._id" :content="['#data_' + index]"> 
    <div class="features_item sm-m-top-30"> 
     <div class="f_item_text"> 
      <img v-bind:src="item.picture"> 
      <span>{{ countTitle(item.title) }}</span> 
      <p>{{ countSting(item.body) }}</p> 
     </div> 
    </div> 
</div> 

のような弾性条件を作成するときに、私は混乱しています:私はすべての3 recurrence dataがクラスに追加取得するにはどうすればよい

if(i % 3 === 2) 

data_1などから始まる次の3つのデータの名前

+0

開始? '1 + Math.trunc(7/3)'は3を返します – Botje

+0

こんにちは@ボテエ私はそのような形式にしたいです...多分あなたはアイデアがありますか? –

答えて

0

Math.floor(i/3)+1ここiインデックスと3で割ると切り捨てないのはなぜフォーム0

for(i=0;i<=10;i++){ 
 
    console.log(Math.floor(i/3)+1); 
 
}

関連する問題