モジュラスによるループルーグ

Question

手続き each two dataモジュラスを使用していますか？私がループをしたい場合は、every two dataを取得してください。例：

I 6データを有する：

• データA
• データB
• データC
• データD
• データE
• データF

をだから私が望む最終結果makeは、係数を持つ各データにクラスを与えることですevery two data。私は結果を持っています：

• データA |クラス1
• データB |クラス1
• データC |クラス2
• データD |クラス2
• データE |クラス3
• データF |新しいデータが入力された場合、クラス3

class nameは常にcounterを使用してincreasedなります。

私は、以下のサンプルコード作成しました：

var app = new Vue({ 
 
    el: '#app', 
 
    data() { 
 
     return { 
 
      items: [{ 
 
       "id": "111", 
 
       "nama": "George", 
 
      }, { 
 
       "id": "222", 
 
       "nama": "Paul", 
 
      }, { 
 
       "id": "333", 
 
       "nama": "Mira", 
 
      }, { 
 
       "id": "444", 
 
       "nama": "Doms", 
 
      }, { 
 
       "id": "555", 
 
       "nama": "Brian", 
 
      }, { 
 
       "id": "666", 
 
       "nama": "Oscar", 
 
      }] 
 
     } 
 
    }, 
 
    methods: { 
 
     computedClass(index) { 
 
      defValue = 1 
 
      if (index % 2 === 0) { 
 
       return "data_1" 
 
      } 
 
     } 
 
    } 
 
});

.item { 
 
    padding: 10px; 
 
} 
 
.data_1 { 
 
    color: #FF0000; 
 
} 
 
.data_2 { 
 
    color: #0000FF; 
 
} 
 
.data_3 { 
 
    color: #00CC00; 
 
}

<script src="https://unpkg.com/vue@2.4.2/dist/vue.js"></script> 
 

 
<div id="app"> 
 
    <div class="item" 
 
     :class="computedClass(index)" 
 
     v-for="(item, index) in items"> 
 
     {{item.nama}} 
 
     </div> 
 
</div>

を私は、私はクラスの名前もincremented with counterされ得るcounter and modulusように2つのずつのデータを行うことが混乱しています。

私のコードでは、モジュラスはevery second dataしかできません。いいえevery two data。そして私はカウンターでクラスの命名をするのが混乱しています

私を助けてくれますか？ありがとう

Answer 1

あなたは正しい考えがありますが、あなたのロジックはcomputedClassメソッドで間違っています。

代わりにこれを試してみてください....すごい@thanksdこんにちはご協力いただきありがとうござい

var app = new Vue({ 
 
    el: '#app', 
 
    data() { 
 
    return { 
 
     items: [{"id": "111","nama": "George",},{"id": "222","nama": "Paul",},{"id": "333","nama": "Mira",},{"id": "444","nama": "Doms",},{"id": "555","nama": "Brian",},{"id": "666","nama": "Oscar",}] 
 
    } 
 
    }, 
 
    methods: { 
 
    computedClass(index) { 
 
     return "data_" + Math.ceil((index + 1)/2); 
 
    } 
 
    } 
 
});

.item { 
 
    padding: 10px; 
 
} 
 
.data_1 { 
 
    color: #FF0000; 
 
} 
 
.data_2 { 
 
    color: #0000FF; 
 
} 
 
.data_3 { 
 
    color: #00CC00; 
 
}

<script src="https://unpkg.com/vue@2.4.2/dist/vue.js"></script> 
 

 
<div id="app"> 
 
    <div 
 
    class="item" 
 
    :class="computedClass(index)" 
 
    v-for="(item, index) in items" 
 
    > 
 
    {{item.nama}} 
 
    </div> 
 
</div>