Vue循環與模數

Question

如何做looping爲each two data使用模數？如果我想爲every two data做一個循環獲得順序課程。例如：

我有6數據：

• 數據的
• 數據B
• 數據C
• 數據d
• 數據E
• 數據F

所以我想要的最終結果make就是給模數every two data的每個數據賦予類。我將得到結果：

• Data A | 1級
• 數據B | 1級
• Data C | 2級
• Data D | 2級
• Data E | 3級
• Data F | 3

的class name班上總是會increased使用counter如果輸入任何新數據。

我創建了下面的示例代碼：

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>

，但我很困惑做counter and modulus使每兩個數據，我得到的類的名稱也被incremented with counter。

在我上面的代碼中，我只能做模數every second data。不是every two data。而我很困惑做班級命名計數器

你能幫助我嗎？謝謝

Answer 1

您有正確的想法，但您的邏輯在computedClass方法中是錯誤的。

試試這個：

computedClass(index) { 
    return "data_" + Math.ceil((index + 1)/2); 
} 

---

這裏有一個工作示例：

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>